html中怎么让div变成长椭圆,从div中切出的CSS椭圆形状

你可以从这个Running Demo kbd>开始

注意：我添加了一个小动画来更改背景颜色，只是为了清除岛和带有剪切的div之间的空间是非常透明的。

HTML

Circle Text

CSS

.cutout {

height: 10em;

background: radial-gradient(ellipse 200px 150px at 50% 100%,

transparent 100px, #555 50px);

position: relative;

}

.island {

position: absolute;

left: calc(50% - 150px);

bottom: -50%;

width: 300px;

background: radial-gradient(ellipse 200px 150px at 50% 50%,

silver 90px, rgba(0, 0, 0, 0) 50px);

height: 10em;

}

.island > div {

position: absolute;

left: 80px;

right: 80px;

top: 30px;

bottom: 30px;

background: rgba(fff, 0, 0, 0.2);

padding: 5px;

text-align: center;

}

#circleText {

padding-top: 30px;

font-size: 1.5em;

}