16

Here is an image of what I'm talking about:

corners

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.

2
  • Are you sure those aren't rounded corners that just look straight because the amount of rounding is so small? Commented Jun 24, 2011 at 21:57
  • 3
    If the amount of rounding was that small, you wouldn't see anything Commented Jun 24, 2011 at 21:59

6 Answers 6

15

Do you mean something like this demo fiddle?

Angled corners

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.

0
2

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:

1

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.

1
  • 4
    well technically you could do cut corners like this in a similar way to one of the old rounded corner hacks (lots of small layered divs), but I'd hate to send anyone down that road.
    – Endophage
    Commented Jun 24, 2011 at 21:58
1

If you aren't afraid of CSS3, then dive into either border-images or multiple backgrounds. It's both css and images.

1

[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.

0

This javascript library

Cross browser simplicity! Why use CSS anyway...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.