I have created essentially a large arrow pointing right.
<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-bottom: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>
<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-top: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>
Now I know this isn't "proper" but I am just testing right now.
I am wondering if there is a way that I can use this border technique and still somehow place a drop shadow on the leading bottom edge of the arrow. I was thinking of placing another div underneath it, but for this technique to work the other borders need to be visible.
If this can't be done using the border technique am I forced to use an image as the front of this arrow.
Thanks
You might want to consider using a Canvas to do this, which works cross platform very well with ExplorerCanvas included for MSIE compatibility (and of course is supported natively in WebKit & Gecko).
I believe it is box-shadow but that is likely to assume it works on the box model and probably won't compute the geometry created by the borders.
Related
I'm trying to create a slanted sidebar menu to my website like in the wider shape picture attached. The idea is to start the diagonal lines in both the top and bottom of the div from about the middle of the width, maybe even from a bit closer to the edges. Eventually when the menu is collapsed, it suppose to look like in the picture with the narrow shape. How can I do it? Thanks!
P.S: I already got the functionality to work. I only need help with the CSS Design of the div.
.triangle-left {
width: 0;
height: 0;
border-top: 750px solid transparent;
border-right: 50px solid #555;
border-bottom: 750px solid transparent;
}
<div class="triangle-left">
</div>
This can probably be adjusted as well for your needs but this is how I went about attempting this.
So, I'm working on my Wordpress theme for my personal website, and I'm stuck trying to figure out how to do a couple things:
1) I need for the white to extend above the top edge of the page content
2) I'd like for the container to extend to the bottom edge of the viewport if possible.
I'm using Twitter Bootstrap for all of my layout stuff. Source is viewable by normal means, etc.
I tried using min-height: 100% in various places, haven't had much luck. Maybe it just wasn't in the right place, who knows.
Thanks ahead of time for any response!
To get the white to extend to the top, remove padding-top from the .page-container and add it to page-outline instead. Also add height: 100% to the page-outline.
So your CSS looks like this for page-container and page-outline:
.page-container {
min-height: 100%;
}
.page-outline {
background-color: white;
border-left: 1px solid black;
border-right: 1px solid black;
padding-top: 25px;
height: 100%;
}
I'm very very new to bootstrap and front-end frameworks in general. But, I am able to notice the characteristics that sites that use bootstrap have in common. The following picture contains something that I find to be very ubiquitous amongst bootstrap sites. The downward (or any direction) blue arrow that's pointing the the text below it is what I'm referring too.
I used firebug to inspect the elements and found it to be something that was relevant to the .hero-unit div.
How exactly does this work and how is it accomplished?
It doesn't come standard with bootstrap but Here is a good article on how to do with :after which I believe is what you are looking for.
Demo
.hero:after {
z-index: -1;
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
content:'';
width: 0;
height: 0;
border-top: solid 10px #e15915;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
You make the triangle larger and smaller by adjusting the border-* attributes, and also the margin-left(border * -1).
Here is what you found in firebug. Hero Unit does refer to a jumbotron-style header, a large header element that can be used in bootstrap. You can find this element here:
http://getbootstrap.com/2.3.2/components.html#typography
Still the arrow you are referring to seems to be something that has been designed by the developer and does not come with the bootstrap unit.
Quick question. I was writing out some code and was curious if there is a way to add a border on a div that is 5px within the object - as in not on the actual edge of the div. I checked out WC3 and didn't see any specs - but I may have missed it.
In my case I'd be using a dashed border 5px inside the div, to create an effect like the div had been sewn to the rest of the site. I can do it fairly easily with background-image but why add KB when a line or two of css could do it.
I would assume it would be something like "border-position" or "border-distance".
Thanks in advance.
I've never come across any property that resembles this, so I'd have to say, simply, 'no.'
But then I'd feel bad for that, so all I could really suggest is wrapping the div you wish to 'sew on' within another div and styling the parent with the same background-color to emulate the look you're after. Here's some css for a possible take:
.wrap {
border-width: 0;
background-color: #ffa;
width: 50%;
padding: 0.5em;
}
.wrap #panel {
background-color: inherit;
height: 6em;
border: 5px dashed #f90;
text-align: center;
}
And some html:
<div class="wrap">
<div id="panel">
<p>This panel should look kinda sewn-on.</p>
</div>
</div>
And, finally, A JS Fiddle demo
Okay, having just rediscovered this answer (thanks to the up-voter!), I can, now, provide an actual CSS-only no-extraneous-elements solution, using box-shadow:
#panel {
background-color: #ffa;
height: 6em;
border: 5px dashed #f90;
text-align: center;
width: 50%;
margin: 30px auto 0 auto;
box-shadow: 0 0 0 15px #ffa;
}
JS Fiddle demo.
The fourth parameter is the key, it defines the, uh, 'spread' of the shadow (the third parameter defines the 'fuzziness'/'diffusion' which in this case is 0), using the same background-color as the element itself gives the illusion that the border is within the element, while it's actually a shadow of the element extending out from the element.
Thats what IE used to do in quirks mode. With CSS3 box-sizing you can switch between the two modes, but I'm not sure how the support is at the moment
See http://www.quirksmode.org/css/box.html for more infos.
...
alt text http://shup.com/Shup/329122/1104381445-My-Desktop.png
I checked here http://www.css3.info/preview/rounded-border/ but all corners are in rounded shape.
Jquery Corner Plugin
Corner is a simple plugin for creating rounded (or other styled)
corners on elements.
Yes, only round/elliptical borders are available through CSS. If you want other shapes you will have to use an image.
It's possible to get straight diagonals by abusing border joins:
<div style="background: gray; height: 100px; width: 200px; position: relative;">
<div style="height: 1px; width: 1px; border-top: solid gray 20px; border-right: solid white 20px; position: absolute; bottom: -1px; right: 0;"></div>
</div>
Not sure that's an especially good idea though.
Improving on bobince's idea, which uses two elements, have you tried using backgrounds? They allow you to stick a normal coloured background plus the moving custom background stuck to the bottom:
element {
background: gray url(cornerImage) no-repeat bottom right;
}
This is superior to a jQuery plugin as no scripting is needed (which should be avoided for presentation as much as possible). The corner image will just be a small square image that has grey and white triangles.