Designers Blog

Cut Corner DIV using CSS3

Posted on: May 23, 2012

The cut corners box requirement came in the one of the folio3 project when they need a Patch Panel (flexible) with 3D feel (Consistent with other icons) , So I used the technique to use Pseudo element  :after , Please check the attached snapshot I made using CSS3 in this project (CutCorners.jpg) , Below is the code…

HTML Code
<div class=”cut-corner”>&nbsp;</div>

CSS Code:.cut-corner{
position:relative;
background-color:#ffbb00;
height:123px;
width:400px;
margin:auto;
}
.cut-corner:after{

position:absolute;
top:0px; left:0px;
content:”.”;
text-indent:-999px; overflow:hidden;
width:0px; height:0px;
border-top: 20px solid white;
border-right: 20px solid transparent;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

May 2012
M T W T F S S
« Mar   Oct »
 123456
78910111213
14151617181920
21222324252627
28293031  
Advertisements
%d bloggers like this: