- 矩形
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 100px;
background-color: red;
}
<div>矩形</div>
效果图
- 圆形
在矩形的基础上加上
border-radius:50%
border-radius圆角的四个值按顺序取值分别为：左上、右上、右下、左下。
- 半圆
左上、右上角是圆角，右下、左下角是直角： 左上角、右上角的值为宽和高一样的值，右下角、左下角的值不变（等于0）；另外，因为还要设置高度值为原来高度的一半才是标准的半圆。
border-radius: 100px 100px 0 0;
height:50px
- 扇形
左上角是圆角，其余三个角都是直角：左上角的值为宽和高一样的值，其他三个角的值不变（等于0）。
border-radius: 100px 0 0;
- 弧形
两个对角变，另外两个对角不变：比如，左上角、右下角取值为宽和高一样的值，右上角、左下角的值不变（等于0） .添加transform属性可旋转成平躺的弧形，类似人的嘴巴形状
border-radius: 100px 0;
transform: rotate(45deg);
- 三角形
设置边框，并把原来div的宽和高的值设置为0，即把原来的矩形压缩成只有边框，但因为设置的边框值比较大（为了保证三角形看起来不会太小或者太细），然后设置每一个边框的颜色不同，就可以看出三角形其实就可以是由边框变换而来的。若只想显示某一块三角形，可以把其他的边框颜色设置为透明，即transparent。
width: 0px;
height: 0px;
border:50px solid transparent;
border-bottom-color: #8E8DCC;
margin: auto;
margin-top: 50px;
- 箭头
先做一个三角形，再做一个向下1px的三角形遮盖，一般用伪类元素：：before或者：：after结合定位来实现
.circle{
width: 0px;
height: 0px;
border:50px solid transparent;
border-bottom-color: #8E8DCC;
position: relative;
}
.circle::after{
content: "";
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #ffffff;
position:absolute;
top: -49px;
left:-50px;
}
