css3 绘制的各种图案

CSS3是现代网页设计中的重要一环，除了布局、字体、元素的样式等方面，CSS3还可以用来绘制各种复杂的图案和形状，为网页设计带来更加丰富的色彩。下面就来介绍CSS3绘制的几种常用图案。

1、圆形

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #000;
}

2、三角形

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #000;
}

3、菱形

.diamond {
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    background-color: #000;
}

4、梯形

.trapezoid {
    width: 200px;
    height: 100px;
    border-bottom: 50px solid #000;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
}

5、正方形内圆

.round-square {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: #000;
    box-shadow: 0px 0px 0px 10px #fff;
}

6、星形

.star {
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-bottom: 70px solid #000;
    border-left: 50px solid transparent;
    transform: rotate(35deg);
    position: relative;
}
.star:before {
    content: "";
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-bottom: 70px solid #000;
    border-left: 50px solid transparent;
    position: absolute;
    top: -45px;
    left: -50px;
    transform: rotate(-70deg);
}
.star:after {
    content: "";
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-bottom: 70px solid #000;
    border-left: 50px solid transparent;
    position: absolute;
    top: -45px;
    left: 0;
    transform: rotate(70deg);
}

7、指南针

.compass {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid #000;
    position: relative;
}
.compass:before {
    content: "";
    width: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -10px;
    background-color: #000;
}
.compass:after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
    background-color: #000;
}
    

以上是CSS3绘制的几种图案示例，CSS3的绘制能力非常强大，可以实现更多独特的图案和形状。相信这些小demo已经能够启发你的灵感，让你在网页设计中创造出更有趣、有价值的内容。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！