Few days back i was just browsing through one of the website casually, and one thing that drew my attention was the curve used in the website. Immediately i started to inspect the code and i was amazed to see that no images were used to create that curve. It was done purely through CSS. Then i spent few hours to learn the CSS trick and i prepared my own.
I have put my HTML code and the CSS that i created. I am sure that this will help the CSS designers around the world.
/****************************HTML code**************************************/
<html>
<head>
<link href="curvedbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="curvedBox">
<span>
<span class="r1" ></span>
<span class="r2" ></span>
<span class="r3" ></span>
<span class="r4" ></span>
</span>
<div class="content">
Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems.
</div>
<span>
<span class="r4" ></span>
<span class="r3" ></span>
<span class="r2" ></span>
<span class="r1" ></span>
</span>
</div>
</body>
</html>
/**************************curvedbox.css*****************************************/
body {background-color:#000;}
.curvedBox
{
width:300px;
}
.curvedBox .r1, .curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
background-color:#fff;
display:block;
overflow:hidden;
height:1px;
font-size:1px;
}
.curvedBox .r2, .curvedBox .r3, .curvedBox .r4
{
border-width:0 1px;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.curvedBox .r1 {margin:0 6px;}
.curvedBox .r2 {margin:0 3px;}
.curvedBox .r3 {margin:0 2px;}
.curvedBox .r4 {margin:0 1px;height:2px;}
.curvedBox .content
{
background:#fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
padding:0 5px;
}
