CSS实现图形的总结

实现三角形

原理

如果对于普通的div加个粗边框会怎么样？

.box {
        width: 400px;
        height: 400px;
        border: 50px solid;
        border-color: red blue pink greenyellow;
      }

可以看出在不同边框的交界处会变成类似于梯形的形状
试想如果让边框接着增大，上下左右每个边框的宽度=盒子宽度的一半的话，盒子会变成什么？

.box {
        box-sizing: border-box;
        width: 400px;
        height: 400px;
        border: 200px solid;
        border-color: red blue pink greenyellow;
      }

注：在这里设置了box属性box-sizing: border-box;

此时就变成了四个三角形，如果我们只想要最下面的粉色三角形，可以这样设置

.box {
        box-sizing: border-box;
        width: 400px;
        height: 400px;
        border: 200px solid transparent;
        border-bottom-color: pink;
      }

总结

我们可以通过设置border获得三角形，之后通过设置其他border颜色为transparent即可得到想要的三角形

实现正方形

如何得到随窗口变化的正方形

如果一一去设置width和height属性，不可能会得到自适应的正方形
这里给出一种办法：**思想：设置高度为0，利用padding-top去撑出一个正方形 **

.box {
        width: 20%;
        height: 0;
        padding-top: 20%;
        background-color: aqua;
      }