CSS3画图

「这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战」。

CSS3画三角形

先看一下只设置border时是什么样子：

        div {
            width: 50px;
            height: 50px;
            border-top: 100px solid paleturquoise;
            border-left: 100px solid peachpuff;
            border-right: 100px solid pink;
            border-bottom: 100px solid plum;
        }

结果输出：

不设置width和height时

        div {
            width: 0px;
            height: 0px;
            border-top: 100px solid paleturquoise;
            border-left: 100px solid peachpuff;
            border-right: 100px solid pink;
            border-bottom: 100px solid plum;
        }

结果输出：

可以看到，当设的有高宽的盒子，三角形被内容所阻挡，所以我们在画三角形的时候不要设置宽度和高度；

border的上下左右其实都分别对应着两条对角线划分出来的区域要想画出三角形，方法就是只让一条border显示，其他border不显示。

接下来，开始画三角形啦~

上面的输出结果可以看出，想画三角形，其实让其他三个不显示，留一个就是了，所以在这里我们需要引入CSS3的新属性，transparent-------透明，看我如何操作~

画一个等腰三角形

        div {
            width: 0px;
            height: 0px;
            border-top: 10px solid paleturquoise;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }

结果：

画一个直角三角形

写法一：

        div {
            width: 0px;
            height: 0px;
            border-top: 150px solid transparent;
            border-left: 100px solid paleturquoise;
            border-right: 0 solid transparent;
            border-bottom: 0 solid transparent;
        }

写法二：

        div {
            width: 0px;
            height: 0px;
            border-color: transparent transparent transparent peachpuff;
            border-style: solid;
            border-width: 150px 0 0 100px;
        }

直角三角形的实现也差不多，就是让其他都不显示，但要想注意，不涉及到的边不要给宽度。

输出结果：

CSS3画椭圆

        div {
            width: 200px;
            height: 100px;
            background-color: peachpuff;
            margin: 40px auto;
            border-radius: 200px/100px;
        }

椭圆的实现方式主要利用了：200px/100px代表每一个角半径都是水平方向/垂直方向

效果图：