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...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。