如何用CSS绘制各种各样的形状( 二 ) _浏览器（IE、火狐、谷歌等）

height: 100px;
background: #f61344;
position: relative;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.heart::before,
.heart::after {
content: "";
background: #f61344;
position: absolute;
}
.heart::before {
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
left: -49px;
top: 0;
}
.heart::after {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
top: -49px;
left: 0;
}
道理：有一个正方形和两个半光滑油滑过定位叠加组合在一路，然后再扭转变形。

文章插图

8太极八卦阵图：
.taiji {
width: 140px;
height: 70px;
background: #fff;
border: 1px solid #f61344;
border-top: 71px solid #f61344;
border-radius: 100%;
position: relative;
}
.taiji::before,
.taiji::after {
content: "";
width: 20px;
height: 20px;
border-radius: 100%;
position: absolute;
top: -35px;
}
.taiji::before {
background: #f61344;
border: 25px solid #fff;
left: 0;
}
.taiji::after {
background: #fff;
border: 25px solid #f61344;
right: 0;
}

文章插图

9水滴
.watter {
width: 120px;
height: 120px;
background: #f61344;
border-radius: 60px 60px 0 60px;
}

文章插图

10特别外形--四爷花瓣展示
html静态
<div class="flower-menu">
<span class="flower1"></span>
<span class="flower2"></span>
<span class="flower3"></span>
<span class="flower4"></span>
</div>
css样式
.flower-menu {
width: 210px;
}
.flower1,
.flower2,
.flower3,
.flower4 {
display: block;
float: left;
width: 100px;
height: 100px;
background: #EC0465;
}
.flower1 {
border-radius: 50px 50px 0 50px;
margin: 0 10px 10px 0;
}
.flower2 {
border-radius: 50px 50px 50px 0;
}
.flower3 {
border-radius: 50px 0 50px 50px;
margin-right: 10px;
}
.flower4 {
border-radius: 0 50px 50px 50px;
}

文章插图

11无限符号
.infinite {
width: 168px;
height: 84px;
position: relative;
}
.infinite::before,
.infinite::after {
content: "";
width: 80px;
height: 80px;
border: 2px solid #EC0465;
position: absolute;
bottom: 0;
}
.infinite::before {
border-radius: 40px 40px 0 40px;
left: 0;
transform: rotate(-45deg);
}
.infinite::after {
border-radius: 40px 40px 40px 0;
left: 116px;
transform: rotate(45deg)
}