CSS3 Border-radius创建一个蛋形

本文介绍了CSS3 Border-radius创建一个蛋形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用CSS3建立随机形状.我被卡在这个蛋形上了.我检查了蛋形的数学原理，它由2个半径不同的圆组成.但是，我无法在此处将这种基本结构与CSS生成代码(尤其是边界半径")关联起来.部分.

  #egg {显示:块;背景颜色:绿色；宽度:126px;/*宽度必须为高度的70％*//*可以使用width:70％;在方形容器中*/高度:180像素；/*注意Safari需要实际的px作为边界半径(错误)*/-webkit-border-radius:63px 63px 63px 63px/108px 108px 72px 72px;/*在Safari中失败，但在Chrome中覆盖*/边界半径:50％50％50％50％/60％60％40％40％;}

解决方案

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

.egg {
    display: block;
    width: 120px;
    height: 180px;
    background-color: green;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

<div class="egg"></div>

Further reading on border radius with slash syntax.

这篇关于CSS3 Border-radius创建一个蛋形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！