CSS画常用小图形

矩形

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;
 }

CSS画常用小图形

推荐阅读更多精彩内容