Sass绘制多边形

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

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;
          
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

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

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部