Here is an image of what I'm talking about:
Is there a way to get the corners like this using css3 or do I have to resort to images? I believe I saw a tutorial on this somewhere but I can't seem to find it.
Here is an image of what I'm talking about:
Is there a way to get the corners like this using css3 or do I have to resort to images? I believe I saw a tutorial on this somewhere but I can't seem to find it.
Do you mean something like this demo fiddle?
HTML:
<div class="box">
<div class="head">
<div class="like"></div>
<h3>User927</h3>
</div>
<div class="cont">
<p>Lorem ipsum...</p>
</div>
<div class="foot">
<a href="">More</a>
</div>
</div>
CSS:
.box {
width: 310px;
position: relative;
}
.head {
background: black;
color: white;
}
.cont {
border-left: 1px solid silver;
border-right: 1px solid silver;
}
.foot {
background: lightgray;
border: 1px solid silver;
border-bottom-width: 3px;
}
.head:before,
.head:after,
.foot:before,
.foot:after {
font-size: 0px;
content: ".";
position: absolute;
}
.head:before {
border-top: 5px solid white;
border-right: 5px solid black;
left: 0;
top: 0;
}
.head:after {
border-top: 5px solid white;
border-left: 5px solid black;
right: 0;
top: 0;
}
.foot:before {
border-bottom: 7px solid white;
border-right: 7px solid transparent;
left: 0;
bottom: 0;
}
.foot:after {
border-bottom: 7px solid white;
border-left: 7px solid transparent;
right: 0;
bottom: 0;
}
Downside: for IE7 you would need extra span's in the markup because the :after
and :before
specifiers are not supported, see this revised fiddle.
I've had great luck with jQuery Corners:
http://malsup.com/jquery/corner/
It can do slanted corners as well as many other varieties, and works well in older browsers too:
You can do rounded corners (such as on the 28/like in the image) with CSS, but corners cut like those at the top of the container require images.
If you aren't afraid of CSS3, then dive into either border-images or multiple backgrounds. It's both css and images.
[IMPORTANT] Go for this approach if you really want to stick to CSS 2.0.
It may seem weird, but I have seen this in Google rendered pages! (that was for rounding but the same technique can be used here):
.border-line {background:blue; border:solid 3px gray; border-width: 0 3px; height:1px;}
<div class='top-border-line'></div>
<div class='border-line' style='margin:0 5px;'></div>
<div class='border-line' style='margin:0 4px;'></div>
<div class='border-line' style='margin:0 3px;'></div>
<div class='border-line' style='margin:0 2px;'></div>
<div class='border-line' style='margin:0 1px;'></div>
Got the idea? each of those divs are one single row steping backward linearly to form the "angle". and there is a top solid line above them.