Круг и эллипс

?> Подробнее: border-radius

Обычно мы используем свойство border-radius, чтобы создать закругленные углы. Однако это свойство позволяет отдельно указывать полуось и полудиаметр, просто разделив их значением "/" в CSS. Благодаря этому можно легко создавать полуэллипсы, четвертинки круга и другие распространённые формы.

<script v-pre type="text/x-template" id="ellipse"> <style> main { width: 100%; padding: 60px 0; display: flex; flex-wrap: wrap; justify-content: space-around; } div { width: 200px; height: 150px; background: #b4a078; margin-bottom: 30px; } .ellipse:nth-of-type(1) { width: 300px; height: 150px; border-radius: 50% / 100% 100% 0 0; } .ellipse:nth-of-type(2) { width: 150px; height: 150px; border-radius: 100% 0 0 0; } .ellipse:nth-of-type(3) { border-radius: 50% / 100% 100% 0 0; } .ellipse:nth-of-type(4) { width: 100px; border-radius: 100% 0 0 0; } .ellipse:nth-of-type(5) { width: 300px; border-radius: 50% / 0 100%; } .ellipse:nth-of-type(6) { width: 300px; border-radius: 50% / 100% 0; } </style> <script> </script> </script>

Поддержка браузерами

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=border-radius&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="458px"></iframe>