Saturday, January 24, 2015

Creating rounded rectangle CSS

<style type="text/css">

div {
position: relative;
margin: 30px;
width: 150px;
height: 100px;
background: #FF5656;
border-radius: 1000px / 200px;
}
div:after, div:before {
position: absolute;
content: '';
width: 10px;
height: 72%;
border-top-left-radius: 200px 1000px;
border-bottom-left-radius: 200px 1000px;
left: -6px;
top: 14%;
background: #FF5656;
}
div:after {
border-radius: 0;
border-top-right-radius: 200px 1000px;
border-bottom-right-radius: 200px 1000px;
left: calc(100% - 4px);
}

</style>

<div></div>


Output :)


No comments:

Post a Comment