CODEWITHSUNDEEP
css
J82
J82

Reputation: 2387

How do I make corners angled like this using css?

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.

Upvotes: 16

Views: 20422

Answers (6)

Gga
Gga

Reputation: 4421

This javascript library

Cross browser simplicity! Why use CSS anyway...

Upvotes: 0

Seth
Seth

Reputation: 2796

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:

Upvotes: 2

NGLN
NGLN

Reputation: 43649

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.

Upvotes: 15

Mo Valipour
Mo Valipour

Reputation: 13496

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

Upvotes: 1

Levi Morrison
Levi Morrison

Reputation: 19552

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

Upvotes: 1

Adam Hopkinson
Adam Hopkinson

Reputation: 28795

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.

Upvotes: 1

Related Questions