html5怎么把div做成椭圆,jquery – 从div切出的CSS椭圆形状

你可以从这个

@L_404_1@开始

注意：我添加了一个小动画来更改背景颜色,只是为了清除岛和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) 50px);

height: 10em;

}

.island > div {

position: absolute;

left: 80px;

right: 80px;

top: 30px;

bottom: 30px;

background: rgba(fff,0.2);

padding: 5px;

text-align: center;

}

#circleText {

padding-top: 30px;

font-size: 1.5em;

}