使用CSS绘出各类图形

1.合理使用after和before伪类

如果伪类是一个有长宽的内容，那么就会无效，也就是伪类内容会在长宽里面，不会在外面，那么就可以设置伪类形状

必须采用定位才能解决位置问题，有一重点是content必须要，没有内容的情况下都使用content:""，没有content的情况下，伪类失效。

2.使用伪类画出图形

3.使用伪类画出带箭头的输入框

原理：采用border的宽度造成形状突变，width，height都为0的情况下，就可以由border形状决定外层形状了，下面演示一下内容

.main::before {

width: 0px;

height: 0px;

background-color: blue;

content: "";

position: absolute;

border-top: 50px solid red;

border-left: 50px solid blue;

border-right: 50px solid orchid;

border-bottom: 50px solid burlywood;

top: 150px;

left: -100px;

}

那么你想将那一边三角形变长，就将border变长，不想要看到其他的使用transparent透明颜色就可

  .main::before {
            width: 0px;
            height: 0px;
            content: "";
            position: absolute;
            border-top: 50px solid transparent;
            border-left: 30px solid transparent;
            border-right: 70px solid red;
            border-bottom: 50px solid transparent;
            top: 150px;
            left: -100px;
        }

4.组合梯形

 .main::before {
            width: 0px;
            height: 0px;
            content: "";
            position: absolute;
            border-top: 100px solid transparent;
            border-left: 0px solid green;
            border-right: 100px solid red;
            border-bottom: 0px solid black;
            top: 0px;
            left: -100px;
        }

        .main::after {
            width: 0px;
            height: 0px;
            content: "";
            position: absolute;
            border-top: 100px solid transparent;
            border-left: 100px solid red;
            border-right: 00px solid orange;
            border-bottom: 0px solid black;
            top: 0px;
            right: -100px;
        }

5.桃心

原理：就是一个正方形加两个半圆，然后旋转45度。