一些基础css图形的实现-白红宇

以下图形会大量用到边框和伪类及transform属性

1. 三角形

上三角可以被视作下边框被透明的左边框和右边框遮挡了一部分

.top-triangle {            width: 0;            border-bottom: 100px solid #2980B9;            border-left: 50px solid transparent;            border-right: 50px solid transparent;        }复制代码

左上三角可以被视作上边框被透明有边框遮挡一部分

.topleft-triangle {            width: 0;            border-top: 100px solid #2980B9;            border-right: 100px solid transparent;        }复制代码

2. 箭头

我们的本体是上面提到的三角形作为箭头头部,弯曲线条其实是一个弯曲45°图形的上边框,由于其他部分是透明的,会遮挡一部分上边框,所以线条会有变窄趋势

.arrow {            position: relative;            width: 0;            border-right: 100px solid #2980B9;            border-top: 100px solid transparent;            transform: rotate(15deg) translateX(300px);        }        .arrow::after {            content: '';            position: absolute;            border: 0 solid transparent;            border-top: 30px solid #2980B9;            border-radius: 200px 0 0 0;            width: 120px;            height: 120px;            top: -120px;            left: -99px;            transform: rotate(45deg)        }复制代码

3.梯形

梯形其实与三角形大同小异,斜线都是由边框遮挡形成的,区别在于定义了宽度导致梯形的上边也有宽度

.trapezoid {            width: 0;            border-bottom: 100px solid #2980B9;            border-left: 25px solid transparent;            border-right: 25px solid transparent;            width: 100px;        }复制代码

4. 六角形

六角形被视为两个三角形

.star-six {            width: 0;            position: relative;            border-bottom: 80px solid #2980B9;            border-left: 50px solid transparent;            border-right: 50px solid transparent;            transform: translateX(100px)        }        .star-six::after {            content: '';            position: absolute;            border-top: 80px solid #2980B9;            border-left: 50px solid transparent;            border-right: 50px solid transparent;            left: -50px;            top: 25px;        }复制代码

5. 五角星

五角星被分解为三个三角形(其他分解方式也可以实现)

.star-five {            margin: 50px 0;            position: relative;            color: #2980B9;            width: 0px;            border-right: 50px solid transparent;            border-bottom: 35px solid #2980B9;            border-left: 50px solid transparent;            transform: rotate(35deg);        }        .star-five::before {            border-bottom: 40px solid #2980B9;            border-left: 15px solid transparent;            border-right: 15px solid transparent;            position: absolute;            top: -22.5px;            left: -30px;            content: '';            transform: rotate(-35deg);        }        .star-five::after {            content: '';            position: absolute;            width: 0px;            border-right: 50px solid transparent;            border-bottom: 35px solid #2980B9;            border-left: 50px solid transparent;            transform: rotate(-70deg);            top: 0;            left: -50px;        }复制代码

6. 五边形

分为上三角和梯形

.pentagon {            position: relative;            width: 80px;            border-top: 67px solid #2980B9;            border-left: 23px solid transparent;            border-right: 23px solid transparent;            transform: translate(100px)        }        .pentagon::before {            position: absolute;            content: '';            width: 0;            border-bottom: 50px solid #2980B9;            border-left: 63px solid transparent;            border-right: 63px solid transparent;            top: -117px;            left: -23px;        }复制代码

7.六边形

分为上梯形和下梯形

.hexagon {            position: relative;            width: 60px;            border-bottom: 50px solid #2980B9;            border-left: 33px solid transparent;            border-right: 33px solid transparent;            transform: rotate(90deg);        }        .hexagon::before {            content: '';            position: absolute;            width: 60px;            border-top: 50px solid #2980B9;            border-left: 33px solid transparent;            border-right: 33px solid transparent;            top: 50px;            left: -33px        }复制代码

8. 心形

分为两个长方形

.heart {            position: relative;            width: 50px;            height: 80px;            border-radius: 50px 50px 0 0;            background-color: #2980B9;            transform: translate(200px) rotate(-45deg);        }        .heart::before {            content: '';            position: absolute;            width: 50px;            height: 80px;            border-radius: 30px 30px 0 0;            background-color: #2980B9;            transform: rotate(90deg);            top: 15px;            left: 15px        }复制代码

9.八卦图

.yin-yang {            position: relative;            width: 100px;            height: 50px;            border: 1px solid #2980B9;            border-bottom: 50px solid #2980B9;            border-radius: 50%        }        .yin-yang::after {            position: absolute;            content: "";            width: 10px;            height: 10px;            border-radius: 50%;            border: 20px solid #2980B9;            top: 25px;            background: #fff;        }        .yin-yang::before {            position: absolute;            content: '';            width: 10px;            height: 10px;            border-radius: 50%;            background-color: #2980B9;            border: 20px solid #fff;            top: 25px;            left: 50px;            /* z-index: 99; */        }复制代码

10. 月亮

.moon {            width: 80px;            height: 80px;            border-radius: 50%;            box-shadow: 15px 15px 0 0 #2980B9;        }复制代码