html用css画多边形,Sass绘制多边形_Preprocessor, Sass, SCSS, clip-path, CSS处理器, 会员专栏 教程_W3cplus...
CSS畫圖形在Web運用中時常看到，比如三角形、五角星，心形，Ribbon等。不過以前使用CSS繪制圖形一般都是借助于border來繪制，但這樣的方式受到一定的限制，而且實用價值也有所限制。這篇文章將介紹使用CSS的clip-path來完成正多邊形的繪制，并且借助CSS預(yù)處理器Sass給這兩種方法定義對應(yīng)的混合宏和函數(shù)，實現(xiàn)正多邊形的開發(fā)。
border和多個元素繪制多邊形
使用border和多個HTML元素繪制三角形，Ribbon等對于我們來說還是易事，也是常見的事，并且實用性、可擴(kuò)展性并不受到太多限制。但對于一個多邊形來說，那就相對而言會麻煩很多了。比如一個正六邊形。比如下面的一個示例：
.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;
}
}
將這個示例擴(kuò)展一下，采用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);
}
}
}
}
調(diào)用定義好的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，看到的效果如下：
總結(jié)
以上是生活随笔為你收集整理的html用css画多边形,Sass绘制多边形_Preprocessor, Sass, SCSS, clip-path, CSS处理器, 会员专栏 教程_W3cplus...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： realme真我GT Neo5 SE跑分
- 下一篇： js css加载器,webpack的CS