Curve the lengths of a rectangle with CSS? -
is possible make shape css? can't done border radius, there way 'bend' rectangles sides?
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
Post a Comment