css画三角形

1.三角形
(1)有边框的三角形
(2)东北、东南、西北、西南三角形
2.气泡框的三角形
3.扇形

三角形的样式可以利用border边框，因为border的边框是由四个三角形组成的。设置border-width，border-style，border-color属性

.triangle {
            width: 0;
            height: 0;
            border-width: 40px;
            border-style: solid;
            border-color: red green yellow blue
        }

效果：

1.带边框的三角形思路是将两个三角形叠加在一起，外层的三角形稍大一些，上下左右四个方向的三角形相对于父级定位都是不同的。设置三个属性值
向上的三角形：
HTML部分：

css部分：

* {
            margin: 0;
            padding: 0;
        }
        .triangle-up {
            position: relative;
            width: 0;
            height: 0;
            border-width: 0 30px 30px;/*三个属性值*/
            border-style: solid;
            border-color: transparent transparent green;
            margin: 40px;
        }

        div {
            position: absolute;/*内部三角形根据中心点定位，不同朝向的三角形需要需要left和top值*/
            left: -28px;
            top: 1px;
            width: 0;
            height: 0;
            border-width: 0 28px 28px;
            border-style: solid;
            border-color: transparent transparent yellow;
        }

效果图：

继续书写西北方（↖），东北方（↗），西南方（↙），东南方（↘）的三角形，以西南方为例：设置四个属性值
HTML部分：

css部分：

* {
            margin: 0;
            padding: 0;
        }

        .triangle {
            width: 0;
            height: 0;
            margin: 40px;
            border-width: 0px 0 30px 30px;/*四个属性值*/
            border-style: solid;
            border-color: transparent transparent green transparent;
        }

2.气泡框效果图：

HTML部分：

    气泡框

css部分：

* {
            margin: 0;
            padding: 0;
        }

        .popup {
            position: relative;
            width: 100px;
            padding: 10px 20px;
            margin: 100px;
            background: green;
            border-radius: 4px;
            border: 1px solid #000;
            text-align: center;
        }

        span {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);/*三角形居中显示*/
            width: 0;
            height: 0;
            border-width: 0 10px 10px;/*三角形大小*/
            border-style: solid;
            border-color: transparent transparent #000;/*三角形的朝向*/
        }

        em {
            position: absolute;
            left: -10px;
            top: 1px;
            width: 0;
            height: 0;
            border-width: 0 10px 10px;/*没有比外三角形小*/
            border-style: solid;
            border-color: transparent transparent green;
        }

3.扇形
扇形思路跟三角形一个道理，多了一个圆角属性border-radius

.triangle {
            width: 0;
            height: 0;
            margin: 40px;
            border-width: 30px;
            border-style: solid;
            border-color: green transparent transparent;
            border-radius: 30px;/*与border-width宽度一致*/
        }