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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: