Designers Blog

Archive for May 23rd, 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;
}