Rectangle length curve with CSS?

Question

Is it possible to make this form using CSS? This can not be done with the radius of the border, is there another way to “bend” the sides of the rectangles?

Answer 1

Like the other answers, the best way to make your figure perfect is to use SVG. However, with css3 and using pseudo-layers after and before you can have close forms.

This is far from the way I did FIDDLE as a quick example, but with you can get 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%; } 

Answer 2

I do not think that there is a widespread method for constructing such forms with pure css.

What could you try using inline svg:

 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>"); 

This is just an example of svg, you have to model yourself. It also takes base 64:

 background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTM2NiwzMTAgTDU2NiwxNjAgNDY2LDExMCAxNjYsNjAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPHBhdGggaWQ9InN2Z01hc2siIGQ9Ik0zNjYsMzEwIEw1NjYsMTYwIDQ2NiwxMTAgMTY2LDYwIHoiICAvPgo8L3N2Zz4=) no-repeat; 

Edit: I created a fiddle: https://jsfiddle.net/pm3czdhj/7/ You can also try looking at the css clip-path property.

Answer 3

Some CSS like this will make the rectangle have curved edges:

 div { border: 2px solid; border-radius: 25px; }