(border-radius)通过边框圆角 来绘制简单的 图形
CSS代码
.box {
width: 800px;
height: 900px;
margin: 0 auto;
border: 1px gray solid;
}
.box > div {
width: 700px;
height: 200px;
margin: 10px 25px;
}
.box h4 {
width: 700px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #afc3dc;
margin: 10px 25px;
}
.sector,
.blade,
.leaf,
.chat {
width: 100px;
margin: 30px auto;
}
.sector {
width: 100px;
height: 100px;
border: 1px solid #bc8d8d;
background-color: #bc8d8d;
border-top-left-radius: 100%;
}
.blade {
width: 600px;
height: 100px;
border: 1px solid #bab4fc;
background-color: #bab4fc;
border-radius: 101px 0;
}
.leaf {
width: 150px;
height: 150px;
border: 1px solid #dbfcb5;
background-color: #dbfcb5;
border-radius: 100% 0;
}
.chat {
width: 400px;
height: 100px;
border: 1px solid #fdddb4;
background-color: #fdddb4;
border-radius: 20px 10px 30px 0px;
}
HTML代码
<div class="box">
<div>
<h4>扇形</h4>
<div class="sector"></div>
</div>
<div>
<h4>刀片</h4>
<div class="blade"></div>
</div>
<div>
<h4>叶子</h4>
<div class="leaf"></div>
</div>
<div>
<h4>聊天框</h4>
<div class="chat"></div>
</div>
.box {
width: 800px;
height: 900px;
margin: auto;
border: 1px solid gray;
}
.box > div {
margin: 5px 35px;
}
h3 {
width: 700px;
height: 40px;
background-color: #afc3dc;
margin-bottom: 40px;
text-align: center;
line-height: 40px;
}
.sanjiaoxing,
.tixing,
.six,
.tixing1 {
height: 200px;
margin: 0 auto;
}
.sanjiaoxing {
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px;
border-color: transparent transparent #f97f70;
}
.tixing {
width: 100px;
height: 0;
border-style: solid;
border-width: 0 100px 100px;
border-color: transparent transparent #f97f70;
}
.tixing1 {
width: 100px;
height: 0px;
border-style: solid;
border-width: 100px 100px 0px;
border-color: #f97f70 transparent#f97f70;
}
HTML代码
<div class="box">
<div>
<h3>三角形</h3>
<div class="sanjiaoxing"></div>
</div>
<div>
<h3>梯形</h3>
<div class="tixing"></div>
</div>
<div>
<h3>六边形</h3>
<div class="six">
<div class="tixing"></div>
<div class="tixing1"></div>
</div>
</div>
</div>