Curve the lengths of a rectangle with CSS? -


is possible make shape css? can't done border radius, there way 'bend' rectangles sides?

enter image description here

as other answers, best way make shape perfect using svg. css3 , of pseudolements after , before may have close shapes.

this 1 far i've made fiddle fast example time may better results:

div {   position: relative;   width: 200px;   height: 150px;   margin: 20px 0;   background: green;   border-radius: 50% / 10%;   color: white;   text-align: center;   text-indent: .1em; } div:before {   content: '';   position: absolute;   top: 10%;   bottom: 10%;   right: -5%;   left: -5%;   background: inherit;   border-radius: 5% / 50%; } div:after {   content: '';   position: absolute;   bottom: 0px;   right: -11px;     width: 130px;   height: 120px;   background: green;   border-radius: 20% / 150%;         } 

Comments

Popular posts from this blog

Payment information shows nothing in one page checkout page magento -

tcpdump - How to check if server received packet (acknowledged) -