绘制半圆
绘制半圆其实就是用到border-radius属性
效果图:
代码:
<div class="contain">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
.contain {
width: 100%;
height: 100%;
position: absolute;
background-color: rgb(252, 252, 252);
display: flex;
padding: 30px;
}
.contain div {
width: 0;
height: 0;
margin-left: 30px;
border: 4em solid;
box-sizing: border-box;
border-radius: 50%;
outline: 1px dashed black;
}
.div1 {
border-color: green skyblue transparent transparent !important;
}
.div2 {
border-color: transparent skyblue purple transparent !important;
}
.div3 {
border-color: transparent transparent orange purple !important;
}
.div4 {
border-color: green transparent transparent orange !important;
}
绘制扇形
扇形主要是通过设置其中一处的border-radius的值为100% ,来实现。
代码:
<div class="contain1">
<div class="div11"></div>
<div class="div12"></div>
<div class="div13"></div>
<div class="div14"></div>
</div>
.contain1 {
width: 100%;
height: 10em;
background-color: rgb(252, 252, 252);
display: flex;
padding: 30px;
}
.contain1 div {
width: 4em;
height: 4em;
background-color: aquamarine;
border-color: aqua;
border: 1px solid black;
margin-left: 20px
}
.div11 {
border-radius: 100% 0 0 0;
}
.div12 {
border-radius: 0 100% 0 0;
}
.div13 {
border-radius: 0 0 100% 0;
}
.div14 {
border-radius: 0 0 0 100%;
}
绘制三角形
div的宽高设置为0, 然后某一边框设置为具体颜色,其他三个设置为透明,就可以出现对应方向的三角形。
代码:
<div class="contain2">
<div class="div21"></div>
<div class="div22"></div>
<div class="div23"></div>
<div class="div24"></div>
</div>
.contain2 {
width: 100%;
height: 10em;
background-color: rgb(252, 252, 252);
display: flex;
padding: 30px;
}
.contain2 div {
width: 0;
height: 0;
border-style: solid;
margin-left: 20px
}
.div21 {
border-color: transparent skyblue transparent transparent;
border-width: 4em;
}
.div22 {
border-color: skyblue transparent transparent transparent;
border-width: 4em;
}
.div23 {
border-color: transparent transparent skyblue transparent;
border-width: 4em;
}
.div24 {
border-color: transparent transparent transparent skyblue;
border-width: 4em;
}