2021-03-06

CSS 画三角形

1. 使用知识：
   1. div
   2. border

➢ div是一个无形的盒子，对div 设置的css 样式一般由边框（border）显示出来。div 里放img 是另一件事了。

    /*  css style */
    将div 的宽和高都置为零，对border-width进行设置
                就会得到一个长宽高都为100px 的正方形，也可以对top，right，bottom，left  -width设置得到长方形
        <style>{
            .d1 {
                width: 0;
                height: 0;
                border: 100px solid red;
            }
        }
        <style>
        /* <div class="d1"><div> */

➢ css 将div 边框分成了上右下左四个部分（即顺时针循环top，right，bottom，left）
➢ 颜色的不同其实就是将四个边框设置不同的颜色

        <style>
        .square{
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 1px;
            border-color: red blue yellow green;
        }
        .triangle1{
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 100px;
            border-color: red blue yellow green;
        }
    </style>

➢ 由此可以看出，想要得到三角形图案只要使其中一些块变为透明即可

• border-color: transparent

    <style>
        .triangle1 {
            /*  将div 的宽和高都置为零，对border-width进行设置
                就会得到一个长宽高都为100px 的正方形，也可以对top，right，bottom，left  -width对
            */
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 100px;
            border-color: red transparent transparent green;
        }
    </style>

➢ 三角形旋转

• transform(); 实现不同需求的图形旋转效果

➢ 使用 border-radius: 50%; 可使图形变为圆形，50% 时为圆。