CSS3不规则图形绘制技巧大全
本文收集了利用CSS3实现各种不规则图形的代码示例，涵盖从基本几何到复杂图案。以下示例均基于纯CSS实现。
三角形变体
核心原理：将元素的宽高设为0，利用边框的透明与不透明组合形成三角形。
/* 朝上三角形 */
.tri-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #ff0000;
}
/* 朝下三角形 */
.tri-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #ff0000;
}
/* 朝左三角形 */
.tri-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid #ff0000;
}
/* 朝右三角形 */
.tri-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid #ff0000;
}
/* 左上角三角形 */
.tri-tl {
width: 0;
height: 0;
border-right: 100px solid transparent;
border-top: 100px solid #ff0000;
}
/* 右上角三角形 */
.tri-tr {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-top: 100px solid #ff0000;
}
/* 左下角三角形 */
.tri-bl {
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 100px solid #ff0000;
}
/* 右下角三角形 */
.tri-br {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-bottom: 100px solid #ff0000;
}
圆形与椭圆系列
通过border-radius和box-shadow可实现多种圆形变体。
/* 标准圆形 */
.circle {
width: 100px;
height: 100px;
background: #ff0000;
border-radius: 50%;
}
/* 椭圆 */
.elipse {
width: 200px;
height: 100px;
background: #ff0000;
border-radius: 100px / 50px;
}
/* 扇形 */
.sect {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #ff0000;
border-radius: 50%;
}
/* 圆环 */
.ring-shape {
width: 100px;
height: 100px;
border: 5px solid #ff0000;
border-radius: 50%;
}
/* 月牙 */
.moon {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 20px 20px 0 0 #ff0000;
}
四边形与梯形
利用transform和border可实现平行四边形、梯形等。
/* 正方形 */
.square-box {
width: 100px;
height: 100px;
background: #ff0000;
}
/* 长方形 */
.rect-box {
width: 200px;
height: 100px;
background: #ff0000;
}
/* 菱形 */
.diamond-shape {
width: 100px;
height: 100px;
background: #ff0000;
transform: rotate(45deg);
}
/* 平行四边形 */
.para-shape {
width: 200px;
height: 100px;
background: #ff0000;
transform: skew(-20deg);
}
/* 普通梯形 */
.trap-shape {
width: 100px;
height: 0;
border-bottom: 100px solid #ff0000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
多边图形
通过组合多个CSS元素（border、伪元素）构造复杂多边形。
/* 五边形：梯形+三角形组合 */
.penta-shape {
width: 60px;
height: 0;
position: relative;
border-top: 55px solid #ff0000;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
.penta-shape::before {
content: "";
position: absolute;
width: 0; height: 0;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-bottom: 35px solid #ff0000;
left: -25px; top: -90px;
}
/* 六边形：矩形+两个三角形 */
.hexa-shape {
width: 100px; height: 55px;
background: #ff0000;
position: relative;
}
.hexa-shape::before {
content: "";
width: 0; height: 0;
position: absolute;
top: -25px; left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #ff0000;
}
.hexa-shape::after {
content: "";
width: 0; height: 0;
position: absolute;
bottom: -25px; left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #ff0000;
}
/* 八边形：矩形+两个梯形 */
.octa-shape {
width: 100px; height: 100px;
background: #ff0000;
position: relative;
}
.octa-shape::before {
content: "";
position: absolute;
width: 42px; height: 0;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
border-bottom: 30px solid #ff0000;
top: 0; left: 0;
}
.octa-shape::after {
content: "";
position: absolute;
width: 42px; height: 0;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
border-top: 30px solid #ff0000;
bottom: 0; left: 0;
}
图案与符号
这些示例展示了利用CSS实现爱心、星形、对话框等常见图标。
/* 爱心 */
.heart {
position: relative;
}
.heart::before,
.heart::after {
content: "";
width: 70px; height: 110px;
background: #ff0000;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.heart::before {
transform: rotate(45deg);
}
.heart::after {
transform: rotate(-45deg);
left: -30px;
}
/* 无穷符号 */
.loop-shape {
width: 190px; height: 100px;
position: relative;
}
.loop-shape::before,
.loop-shape::after {
content: "";
width: 50px; height: 50px;
position: absolute;
border: 20px solid #ff0000;
border-radius: 50px 50px 0 50px;
}
.loop-shape::before {
top: 0; left: 0;
transform: rotate(-45deg);
}
.loop-shape::after {
top: 0; right: 0;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}
/* 鸡蛋形状 */
.egg-shape {
width: 120px; height: 180px;
background: #ff0000;
border-radius: 60% 60% 60% 60% / 70% 70% 50% 50%;
}
/* 吃豆人 */
.pac-shape {
width: 0; height: 0;
border: 60px solid #ff0000;
border-right: 60px solid transparent;
border-radius: 100%;
}
/* 对话框：圆角矩形+三角形 */
.dialog-box {
width: 150px; height: 100px;
background: #ff0000;
border-radius: 10px;
position: relative;
}
.dialog-box::before {
content: "";
width: 0; height: 0;
position: absolute;
left: -20px; top: 40px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 20px solid #ff0000;
}
/* 钻石形态：梯形+三角形 */
.diamond-gem {
width: 50px; height: 0;
position: relative;
border-bottom: 25px solid #ff0000;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
.diamond-gem::before {
content: "";
width: 0; height: 0;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 70px solid #ff0000;
left: -25px; top: 25px;
}
/* 五角星 */
.star-5 {
width: 0; height: 0;
position: relative;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 60px solid #ff0000;
transform: rotate(35deg);
}
.star-5::before {
content: "";
position: absolute;
width: 0; height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 60px solid #ff0000;
transform: rotate(-70deg);
top: 3px; left: -80px;
}
.star-5::after {
content: "";
position: absolute;
width: 0; height: 0;
border-bottom: 60px solid #ff0000;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
transform: rotate(-35deg);
top: -40px; left: -49px;
}
/* 六角星：两个三角形 */
.star-6 {
width: 0; height: 0;
position: relative;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #ff0000;
}
.star-6::before {
content: "";
width: 0; height: 0;
position: absolute;
top: 30px; left: -50px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #ff0000;
}
/* 八角星：两个正方形旋转 */
.star-8 {
width: 100px; height: 100px;
background: #ff0000;
position: relative;
}
.star-8::before {
content: "";
width: 100px; height: 100px;
background: #ff0000;
position: absolute;
top: 0; left: 0;
transform: rotate(45deg);
}
/* 十二角星：三个正方形 */
.star-12 {
width: 100px; height: 100px;
background: #ff0000;
position: relative;
}
.star-12::before,
.star-12::after {
content: "";
width: 100px; height: 100px;
background: #ff0000;
position: absolute;
top: 0; left: 0;
}
.star-12::before {
transform: rotate(-30deg);
}
.star-12::after {
transform: rotate(30deg);
}
以上所有图形均基于CSS3的border、border-radius、transform、伪元素等特性实现，无需额外图片资源。实际使用时可根据设计需求调整尺寸和颜色。
