Sass绘制多边形-守望者-AIR技术交流

破晓发表于 2016-8-18 16:26:56

Sass绘制多边形

来源：http://www.w3cplus.com/preprocessor/creat-css-polygon-wiht-border-and-clip-path-property.html<div> </div><div><a href="http://www.w3cplus.com/blog/tags/112.html" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">CSS画图形</a>在Web运用中时常看到，比如三角形、五角星，心形，Ribbon等。不过以前使用CSS绘制图形一般都是借助于<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">border</code>来绘制，但这样的方式受到一定的限制，而且实用价值也有所限制。这篇文章将介绍使用CSS的<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">clip-path</code>来完成正多边形的绘制，并且借助CSS预处理器Sass给这两种方法定义对应的混合宏和函数，实现正多边形的开发。<h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">border和多个元素绘制多边形</h2>使用<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">border</code>和多个HTML元素绘制三角形，Ribbon等对于我们来说还是易事，也是常见的事，并且实用性、可扩展性并不受到太多限制。但对于一个多边形来说，那就相对而言会麻烦很多了。比如一个正六边形。比如下面的一个示例：<pre class="ruby" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="ruby" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">.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;
}
}
</code></pre><div style="box-sizing: inherit; color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; margin-bottom: 20px;"><iframe id="dXZgyq" src="http://codepen.io/airen/embed/dXZgyq?height=400&theme-id=0&slug-hash=dXZgyq&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe></div>将这个示例扩展一下，采用SCSS来写，原理还是使用<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">border</code>和多个HTML元素配合：<pre class="perl" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="perl" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$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);
 }
 }
}
}
</code></pre>调用定义好的mixin:<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">border-polygon</code>:<pre class="ruby" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="ruby" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$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);
}
}
</code></pre>添加一些额外的CSS，看到的效果如下：<div style="box-sizing: inherit; color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; margin-bottom: 20px;"><iframe id="XKqxNV" src="http://codepen.io/airen/embed/XKqxNV?height=400&theme-id=0&slug-hash=XKqxNV&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe></div><blockquote style="box-sizing: inherit; padding: 15px 20px; margin-bottom: 25px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(0, 163, 207); color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; background: rgb(246, 246, 246);">特别声明:在定义SCSS的mixin时，里面用到了多个数学函数，而SCSS并未直接提供原生的函数，因此需要手工定义对应的SCSS函数。不过有一个优秀的SCSS库可以直接拿来使用。这个库就是<a href="https://github.com/terkel/mathsass" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">mathsass</a>。</blockquote>为了扩展其可用性，添加多个元素并且配合伪类或伪元素来做多一个多边形，就拿六边形来说吧：<pre class="xml" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="xml" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><div class="hexagon">
<a href="##"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
</code></pre>CSS这样写：<pre class="perl" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="perl" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">.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;
 }
}
}
</code></pre>效果如下：<div style="box-sizing: inherit; color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; margin-bottom: 20px;"><iframe id="xOjaQX" src="http://codepen.io/airen/embed/xOjaQX?height=400&theme-id=0&slug-hash=xOjaQX&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe></div>其实现原理不说多，用一张图来说事：<img src="http://cdn.w3cplus.com/cdn/farfuture/CTUcesiiL5ztkwdK0B6_mbLN5IZDxsDnnd8WikvNrUE/mtime:1469462668/sites/default/files/blogs/2016/1607/hexagon.jpg" alt="Sass绘制多边形" title="Sass绘制多边形" style="box-sizing: inherit; border: 1px solid; vertical-align: top; max-width: 100%; height: auto; padding: 2px; margin-left: auto; margin-right: auto; display: block; background: rgb(238, 238, 238);">注: 上图来源于<a href="http://www.queness.com/author/kevin" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">@Kevin Liew</a>写的《<a href="http://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">CREATE BEAUTIFUL HEXAGON SHAPES WITH PURE CSS3</a>》一篇教程中。<h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">clip-path和单个元素绘制多边形</h2>使用<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">border</code>和多个HTML元素，虽然免强能实现我们所需要的效果，并且通过SCSS的扩展，也能很容易绘制任意多边形。但还是较为麻烦。值得庆幸的是，CSS有一个新属性<a href="http://www.w3cplus.com/css3/introducing-css-clip-path-property.html" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;"><code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">clip-path</code></a>可以让我们在一个HTML的元素上绘制任意多的多边形。下面来看看<a href="http://www.oxxostudio.tw/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">OXXO.STUDIO</a>的《<a href="http://www.oxxostudio.tw/articles/201503/css-clip-path.html" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">運用 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">clip-path</code> 的純 CSS 形狀變換</a>》一文中提供的几个示例。先来看看这几个示例：<h3 style="box-sizing: inherit; margin-top: 20px; margin-bottom: 15px; font-size: 1.3em; color: rgb(0, 183, 233); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">正三角形</h3><img src="http://cdn1.w3cplus.com/cdn/farfuture/YqmtYZ9spHNHngxssabYAXr8OPzba71SftROIZGn6ro/mtime:1469465950/sites/default/files/blogs/2016/1607/20150330_1_07.jpg" alt="正三角形" title="正三角形" style="box-sizing: inherit; border: 1px solid; vertical-align: top; max-width: 100%; height: auto; padding: 2px; margin-left: auto; margin-right: auto; display: block; background: rgb(238, 238, 238);"><pre class="css" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="css" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">div{
width:100px;
height:87px;
background:#c00;
-webkit-clip-path:polygon(0% 100%, 50%0%,100% 100%);
}
</code></pre><div style="box-sizing: inherit; color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; margin-bottom: 20px;"><iframe id="kXJAzJ" src="http://codepen.io/airen/embed/kXJAzJ?height=400&theme-id=0&slug-hash=kXJAzJ&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe></div><h3 style="box-sizing: inherit; margin-top: 20px; margin-bottom: 15px; font-size: 1.3em; color: rgb(0, 183, 233); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">正四边形（正方形）</h3><img src="http://cdn.w3cplus.com/cdn/farfuture/zqk5GAFuzxx24O6-0mGulwPdGyLWQGisHerNtgRHPps/mtime:1469465950/sites/default/files/blogs/2016/1607/20150330_1_08.jpg" alt="正四边形" title="正四边形" style="box-sizing: inherit; border: 1px solid; vertical-align: top; max-width: 100%; height: auto; padding: 2px; margin-left: auto; margin-right: auto; display: block; background: rgb(238, 238, 238);"><pre class="css" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="css" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">div{
width:100px;
height:100px;
background:#069;
-webkit-clip-path:polygon(0% 0%, 0% 100%,100% 100%,100% 0%);
}
</code></pre><div style="box-sizing: inherit; color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; margin-bottom: 20px;"><iframe id="xOjyrr" src="http://codepen.io/airen/embed/xOjyrr?height=400&theme-id=0&slug-hash=xOjyrr&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe></div><h3 style="box-sizing: inherit; margin-top: 20px; margin-bottom: 15px; font-size: 1.3em; color: rgb(0, 183, 233); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">正五边形</h3><img src="http://cdn2.w3cplus.com/cdn/farfuture/pqZSYYGthdWoK1wEKYTVhacZw5G1fMnIvf6ENnfFWNY/mtime:1469465950/sites/default/files/blogs/2016/1607/20150330_1_09.jpg" alt="正五边形" title="正五边形" style="box-sizing: inherit; border: 1px solid; vertical-align: top; max-width: 100%; height: auto; padding: 2px; margin-left: auto; margin-right: auto; display: block; background: rgb(238, 238, 238);">正五边形需要计算一下，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">59/(59+95)=38.31%</code>，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">31/(81*2)=19.14%</code>:<pre class="css" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="css" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">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%);
}
</code></pre><div style="box-sizing: inherit; color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; margin-bottom: 20px;"><iframe id="GqGRkj" src="http://codepen.io/airen/embed/GqGRkj?height=400&theme-id=0&slug-hash=GqGRkj&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe></div><h3 style="box-sizing: inherit; margin-top: 20px; margin-bottom: 15px; font-size: 1.3em; color: rgb(0, 183, 233); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">正六边形</h3><img src="http://cdn2.w3cplus.com/cdn/farfuture/w8BqvyvtVPFtoEprNgFgS7SKiQ7gpzofWj47Z0dtcaQ/mtime:1469465950/sites/default/files/blogs/2016/1607/20150330_1_10.jpg" alt="正六边形" title="正六边形" style="box-sizing: inherit; border: 1px solid; vertical-align: top; max-width: 100%; height: auto; padding: 2px; margin-left: auto; margin-right: auto; display: block; background: rgb(238, 238, 238);">正六边形的计算比较简单，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">50/(100+50*2)=25%</code>，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">150/(100+50*2)=75%</code>:<pre class="css" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="css" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">div{
width:200px;
height:174px;
background:#f80;
-webkit-clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}
</code></pre><div style="box-sizing: inherit; color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; margin-bottom: 20px;"><iframe id="grKOrL" src="http://codepen.io/airen/embed/grKOrL?height=400&theme-id=0&slug-hash=grKOrL&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe></div><h3 style="box-sizing: inherit; margin-top: 20px; margin-bottom: 15px; font-size: 1.3em; color: rgb(0, 183, 233); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">正七边形</h3><img src="http://cdn.w3cplus.com/cdn/farfuture/qWNVQmcK0OKxXjK-fGZk2mUVK5AqK2PhpC7jPkiKYSQ/mtime:1469465950/sites/default/files/blogs/2016/1607/20150330_1_11.jpg" alt="正七边形" title="正七边形" style="box-sizing: inherit; border: 1px solid; vertical-align: top; max-width: 100%; height: auto; padding: 2px; margin-left: auto; margin-right: auto; display: block; background: rgb(238, 238, 238);">正七边形是这里计算需要的步数是最多的：<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">22/(100+62*2)=10.09%</code>，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">202/(100+62*2)=90.18%</code>，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">43/(43+97+78)=19.72%</code>，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">(43+97)/(43+97+78)=64.22%</code>，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">62/(100+62*2)=27.68%</code>，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">(100+62)/(100+62*2)=72.32%</code>:<pre class="css" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="css" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">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%);
}
</code></pre><div style="box-sizing: inherit; color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; margin-bottom: 20px;"><iframe id="GqGRjj" src="http://codepen.io/airen/embed/GqGRjj?height=400&theme-id=0&slug-hash=GqGRjj&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe></div><h3 style="box-sizing: inherit; margin-top: 20px; margin-bottom: 15px; font-size: 1.3em; color: rgb(0, 183, 233); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">正八边形</h3><img src="http://cdn1.w3cplus.com/cdn/farfuture/8ehlA5qdB7gu86pTUJOBXi5u41K3LlFdwmbwteMU4x8/mtime:1469465951/sites/default/files/blogs/2016/1607/20150330_1_12.jpg" alt="正八边形" title="正八边形" style="box-sizing: inherit; border: 1px solid; vertical-align: top; max-width: 100%; height: auto; padding: 2px; margin-left: auto; margin-right: auto; display: block; background: rgb(238, 238, 238);">正八边形的计算如下：<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">71/(100+71*2)=29.34%</code>，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">(71+100)/(100+71*2)=70.66%</code>:<pre class="css" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="css" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">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%);
}
</code></pre><div style="box-sizing: inherit; color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; margin-bottom: 20px;"><iframe id="PzaoWp" src="http://codepen.io/airen/embed/PzaoWp?height=400&theme-id=0&slug-hash=PzaoWp&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe></div>上面演示了使用<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">clip-path</code>制作正三边形至正八边形的方法，并且有些正多边形需要通过一定的计算。如果每个都这样人肉去计算，着实让人感到蛋疼。接下来，向大家介绍如何使用SCSS来实现：<pre class="perl" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="perl" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">@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});
}
</code></pre>使用SCSS定义了一个<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">clip-polygon</code>的mixins，这样一来可以通过<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">@include</code>来调用定义好的<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">clip-polygon</code>:<pre class="ruby" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="ruby" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$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);
}
}
</code></pre>最后的效果如下：<div style="box-sizing: inherit; color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; margin-bottom: 20px;"><iframe id="VjxErN" src="http://codepen.io/airen/embed/VjxErN?height=400&theme-id=0&slug-hash=VjxErN&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe></div>上面的示例效果，直接通过SCSS快速实现了正三边形至正十二边形效果。除了通过使用SCSS定义混合宏之外，还可以使用SCSS的<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">function</code>来实现：<pre class="php" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="php" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">@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);
}
</code></pre>然后在调用定义好的<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">polygon()</code>，而且这个函数具有两个参数<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$points</code>,这个参数指的是正多边形的边数；<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">$startPoint</code>指的是开始点，其默认值为<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">0</code>:<pre class="bash" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="bash" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$numPoints: 10;
@for $i from 1 through $numPoints {
$num: $i + 2;
.clippaths .polygon:nth-of-type(#{$i}) {
 clip-path: polygon($num);
}
}
</code></pre>配上一些样式，最后效果如下：<div style="box-sizing: inherit; color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; margin-bottom: 20px;"><iframe id="XKqxYY" src="http://codepen.io/airen/embed/XKqxYY?height=400&theme-id=0&slug-hash=XKqxYY&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe></div><h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">总结</h2>分别整理了使用CSS的<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">border</code>和<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">clip-path</code>属性分别使用多个和单个HTML元素绘制正多边形的效果，而且结合CSS的预处理器SCSS定义相应的混合宏和函数来实现正多边形的效果。从而解放我们的生产力，提高开发效果。最后，如果您有更好的方案或者更好的想法，欢迎在下面的评论中与我们一起分享。</div>

页: [1]

守望者--AIR技术交流's Archiver

Sass绘制多边形