CSS画图形在Web运用中时常看到，比如三角形、五角星，心形，Ribbon等。不过以前使用CSS绘制图形一般都是借助于border来绘制，但这样的方式受到一定的限制，而且实用价值也有所限制。这篇文章将介绍使用CSS的clip-path来完成正多边形的绘制，并且借助CSS预处理器Sass给这两种方法定义对应的混合宏和函数，实现正多边形的开发。
border和多个元素绘制多边形
使用border和多个HTML元素绘制三角形，Ribbon等对于我们来说还是易事，也是常见的事，并且实用性、可扩展性并不受到太多限制。但对于一个多边形来说，那就相对而言会麻烦很多了。比如一个正六边形。比如下面的一个示例：
.hexagon {
width: 100px;
height: 55px;
background: red;
margin: 150px auto;
position: relative;
&:before,
&:after {
content: "";
position: absolute;
width: 0;
height: 0;
}
&:before {
top: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
&:after {
bottom: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
}
将这个示例扩展一下，采用SCSS来写，原理还是使用border和多个HTML元素配合：
$PI: 3.141592653589793;
@mixin border-polygon($num, $color: #000, $radius: 64px) {
position: relative;
height: 2.5*$radius;
width: 2.5*$radius;
div {
$halfWidth: tan($PI / $num) * $radius + 1; /* + 1.5 to account for anti-aliasing */
border-top: #{$radius} solid $color;
border-left: #{$halfWidth} solid transparent;
border-right: #{$halfWidth} solid transparent;
position: absolute;
left: 50%;
top: 50%;
transform-origin: 50% 100%;
@for $i from 0 through $num {
&:nth-child(#{$i}) {
transform: translate(-50%, -100%) rotate(360deg / $num * $i);
}
}
}
}
调用定义好的mixin:border-polygon:
$maxNum: 10;
@for $i from 1 through $maxNum {
$num: $i + 3;
.polygon:nth-of-type(#{$i})::after {
content: "#{$num}";
}
.borders .polygon:nth-of-type(#{$i}) {
@include border-polygon($num, #c00);
}
}
添加一些额外的CSS，看到的效果如下：
html用css画多边形 Sass绘制多边形_Preprocessor Sass SCSS clip-path CSS处理器 会员专栏 教程_W3cplus...
