Sass绘制多边形

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

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,看到的效果如下:

特别声明:在定义SCSS的mixin时,里面用到了多个数学函数,而SCSS并未直接提供原生的函数,因此需要手工定义对应的SCSS函数。不过有一个优秀的SCSS库可以直接拿来使用。这个库就是mathsass

为了扩展其可用性,添加多个元素并且配合伪类或伪元素来做多一个多边形,就拿六边形来说吧:

<div class="hexagon">
    <a href="##"></a>
    <div class="corner-1"></div>
    <div class="corner-2"></div>
</div>

CSS这样写:

.hexagon{
    width: 150px;
    height: 86px;
    position: relative;
    margin: 150px auto;
    background: #ccc   url("https://unsplash.it/300/300/?random") no-repeat center;
    background-size:auto 173px;

    a {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        z-index: -2;
        overflow: hidden;
        backface-visibility: hidden;

        &:before {
            width: 173px;
            height: 173px;
            content: '';
            position: absolute;
            background: inherit;
            top: 0;
            left: 0;
            z-index: 1;
            backface-visibility: hidden;
        }
    }

    .corner-1{
        z-index: -1;
        transform: rotate(60deg);

        &:before {
            transform: rotate(-60deg) translate(-87px, 0px);
            transform-origin: 0 0;
        }
    }
    .corner-2 {
        transform: rotate(-60deg);

        &:before {
            transform: rotate(60deg) translate(-48px, -11px);
            bottom: 0;
        }
    }
}

效果如下:

其实现原理不说多,用一张图来说事:

Sass绘制多边形

注: 上图来源于@Kevin Liew写的《CREATE BEAUTIFUL HEXAGON SHAPES WITH PURE CSS3》一篇教程中。

clip-path和单个元素绘制多边形

使用border和多个HTML元素,虽然免强能实现我们所需要的效果,并且通过SCSS的扩展,也能很容易绘制任意多边形。但还是较为麻烦。

值得庆幸的是,CSS有一个新属性clip-path可以让我们在一个HTML的元素上绘制任意多的多边形。

下面来看看OXXO.STUDIO的《運用 clip-path 的純 CSS 形狀變換》一文中提供的几个示例。先来看看这几个示例:

正三角形

正三角形

div{
    width:100px;
    height:87px;
    background:#c00;
    -webkit-clip-path:polygon(0% 100%, 50%  0%,100% 100%);
}

正四边形(正方形)

正四边形

div{
    width:100px;
    height:100px;
    background:#069;
    -webkit-clip-path:polygon(0% 0%, 0% 100%,100% 100%,100% 0%);
}

正五边形

正五边形

正五边形需要计算一下,59/(59+95)=38.31%31/(81*2)=19.14%:

div{
    width:162px;
    height:154px;
    background:#095;
    -webkit-clip-path:polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%);
}

正六边形

正六边形

正六边形的计算比较简单,50/(100+50*2)=25%150/(100+50*2)=75%:

div{
    width:200px;
    height:174px;
    background:#f80;
    -webkit-clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}

正七边形

正七边形

正七边形是这里计算需要的步数是最多的:22/(100+62*2)=10.09%202/(100+62*2)=90.18%43/(43+97+78)=19.72%(43+97)/(43+97+78)=64.22%62/(100+62*2)=27.68%(100+62)/(100+62*2)=72.32%:

div{
    width:224px;
    height:218px;
    background:#09c;
    margin: 50px auto;
    -webkit-clip-path:polygon(50% 0%, 90.18% 19.72%,100% 64.22%,72.32% 100%,27.68% 100%,0% 64.22%,10.09% 19.72%);
}

正八边形

正八边形

正八边形的计算如下:71/(100+71*2)=29.34%(71+100)/(100+71*2)=70.66%:

div{
    width:242px;
    height:242px;
    background:#f69;
    -webkit-clip-path:polygon(29.34% 0%, 70.66% 0%,100% 29.34%,100% 70.66%,70.66% 100%,29.34% 100%,0% 70.66%,0% 29.34%);
}

上面演示了使用clip-path制作正三边形至正八边形的方法,并且有些正多边形需要通过一定的计算。如果每个都这样人肉去计算,着实让人感到蛋疼。接下来,向大家介绍如何使用SCSS来实现:

@mixin clip-polygon($num, $color, $radius: 64px) {
    position: relative;
    width: $radius*2;
    height: $radius*2;
    background: $color;
    $points: ();
    @for $i from 0 to $num {
        $angle: 360deg/2/$num + 360deg / $num * $i;
        $pointX: 50% + sin($angle)*50%;
        $pointY: 50% + cos($angle)*50%;
        $points: append($points, unquote($pointX+" "+$pointY), "comma");
    }
    clip-path: polygon(#{$points});
}

使用SCSS定义了一个clip-polygon的mixins,这样一来可以通过@include来调用定义好的clip-polygon:

$maxNum: 10;
@for $i from 1 through $maxNum {
    $num: $i + 2;
    .polygon:nth-of-type(#{$i})::after {
        content: "#{$num}";
    }
    .clippaths .polygon:nth-of-type(#{$i}) {
        @include clip-polygon($num, #c00);
    }
}

最后的效果如下:

上面的示例效果,直接通过SCSS快速实现了正三边形至正十二边形效果。

除了通过使用SCSS定义混合宏之外,还可以使用SCSS的function来实现:

@function polygon($points, $startPoint: 0) {
    $angle: (360deg / $points);
    $coords: '';
    @for $point from $startPoint through ($points + $startPoint - 1) {
        $pointAngle: $angle * $point;
        $x: 50% + (percentage(sin($pointAngle)) / 2);
        $y: 50% - (percentage(cos($pointAngle)) / 2);
        $coords: $coords + $x + ' ' + $y;
        @if $point != $points + $startPoint - 1 {
            $coords: $coords + ', ';
        }
        $point: $point + 1;
    }
    $polygon: 'polygon(' + $coords + ')';
    @return unquote($polygon);
}

然后在调用定义好的polygon(),而且这个函数具有两个参数$points,这个参数指的是正多边形的边数;$startPoint指的是开始点,其默认值为0:

$numPoints: 10;
@for $i from 1 through $numPoints {
    $num: $i + 2;
    .clippaths .polygon:nth-of-type(#{$i}) {
        clip-path: polygon($num);
    }
}

配上一些样式,最后效果如下:

总结

分别整理了使用CSS的borderclip-path属性分别使用多个和单个HTML元素绘制正多边形的效果,而且结合CSS的预处理器SCSS定义相应的混合宏和函数来实现正多边形的效果。从而解放我们的生产力,提高开发效果。

最后,如果您有更好的方案或者更好的想法,欢迎在下面的评论中与我们一起分享。

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:http://www.w3cplus.com/preprocessor/creat-css-polygon-wiht-border-and-clip-path-property.html

返回顶部