网页中实现正六边形的N中姿势
1578735832
7年前
<p style="text-align:center"><img src="https://simg.open-open.com/show/e3f700abc3bc42b4c50e3858bdead160.jpg"></p> <p>经常在别人家的网页上看到各中好看图形，其中就有正六边形和组合的蜂窝状图形。今天我们来盘点一下，网页上有哪些姿势实现这个效果</p> <h2>姿势1</h2> <p>css的border</p> <pre> <code class="language-xml">/*css*/ .lb01 { position: relative; width: 200px; height: 120px; background-color: red; margin: 100px; } .lb01:after { content: ""; position: absolute; display: block; top: -160px; width: 0; height: 0; border: 100px solid transparent; border-bottom: 60px solid red; } .lb01:before { content: ""; position: absolute; display: block; bottom: -160px; width: 0; height: 0; border: 100px solid transparent; border-top: 60px solid red; }</code></pre> <pre> <code class="language-xml"><div class="lb01"></div></code></pre> <p>效果如图：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/bb2a069ed4c1dd7f278d3ede3e906c5b.png"></p> <p> 优点：代码简单，兼容性好。缺点：内部不能完美的嵌套内容，只有填充纯色才好看.</p> <h2>姿势2</h2> <p>css3的transform</p> <pre> <code class="language-xml">.lb02 { width: 260px; height: 300px; margin: 50px; -webkit-transform: rotate(60deg); overflow: hidden; } .lb02 div, .lb02 img { width: 100%; height: 100%; overflow: hidden; } .lb02> div { -webkit-transform: rotate(-120deg); } .lb02> div> div { -webkit-transform: rotate(60deg); }</code></pre> <pre> <code class="language-xml"><div class="lb02"> <div> <div> <img src="000.png" /> </div> </div> </div></code></pre> <p>效果如图：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7b0e971d2850addd65c2e4968b0ea99b.png"></p> <p>优点：内部可以嵌套图片内容。缺点：dom结构稍微多，需要对css3支持的浏览器才可以.</p> <h2>姿势3</h2> <p>svg的多边形</p> <pre> <code class="language-xml"><svg viewbox="0,0,400,400" width="400" height="400"> <polygon points="300.0000,200.0000 250.0000,113.3975 150.0000,113.3975 100.0000,200.0000 150.0000,286.6025 250.0000,286.6025" style="fill:lime; stroke:purple; stroke-width:2" /> </svg></code></pre> <p>效果图：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/1e1761faf1ad836aef5e90823f7e805e.png"></p> <p>优点：矢量图形。缺点：浏览器兼容性不理想，稍微有一点偏冷门。</p> <p>什么？你问我上面的坐标点怎么得到的？肯定是写一点代码算出来的呀，难道手写？具体怎么算可以参考下一种方式中的代码.</p> <h2>姿势4</h2> <p>canvas绘图</p> <pre> <code class="language-xml">var canvas = document.getElementById("canvas"); canvas.width = 400; canvas.height = 400; var cc = canvas.getContext("2d"); // 填充一个背景 cc.fillStyle = "#31a6e2"; cc.rect(0 , 0 , 400 , 400); cc.fill(); cc.beginPath(); for (var i = 0 ; i < 6 ; i++) { var x = Math.cos((i * 60)/180 * Math.PI) * 150 + 200 ; var y = -Math.sin((i * 60)/180 * Math.PI) * 150 + 200; cc.lineTo(x,y); } cc.closePath(); cc.lineWidth = 2; cc.fillStyle = "#fc3598"; cc.fill();</code></pre> <pre> <code class="language-xml"><canvas id="canvas"></canvas></code></pre> <p>效果图：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/9b81867730b5eb65ca08c1238c9bb6ec.png"></p> <p>优点：还没想好。缺点：还没想好。这个我已经不知道怎么描述了.....</p> <p>然后我们用六边形玩点有意思的：如图</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/554f257723d12460ec233206d235f40c.png"></p> <p>代码如下：</p> <pre> <code class="language-xml"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #test { width: 850px; padding: 100px; height: 800px; margin: 0 auto; border: 1px solid red; -webkit-perspective: 1920px; -webkit-transform-origin: 50% 30% 600px; overflow: hidden; } ul { -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(60deg); } ul:after { content: ""; display: block; clear: both; } ul li { position: relative; float: left; width: 90px; height: 160px; list-style: none; margin: 0px 50px; background-color: #21a4e8; -webkit-transform: rotate(90deg); } ul li:after { content: ""; display: block; position: absolute; top: 0; right: 100%; border-style: solid; border: 80px solid transparent; border-width: 80px 50px; border-right-color: #21a4e8; } ul li:before { content: ""; display: block; position: absolute; top: 0; left: 100%; border-style: solid; border: 80px solid transparent; border-width: 80px 50px; border-left-color: #21a4e8; } .dob { margin-left: 145px; } </style> </head> <body> <div id="test"> <ul> <li></li> <li></li> <li></li> <li></li> <li class="dob"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="dob"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html></code></pre> <p>当然，你也发挥你的聪明才智，玩点更有意思的。如果你有新的写六边形的方式，也欢迎你补充!</p> <p> </p> <p>来自：https://zhuanlan.zhihu.com/p/24489820</p> <p> </p>