视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[html5]css3绘制多边形的制作（以六边形为例）

时间:2017-09-05 17:45酷播
[html5]css3绘制多边形的制作（以六边形为例）

首先我们分析一下六边形，看能不能把它分解成我们前面有说过的简单的图形，下面看图：原来css中的border还可以这样玩9

分析：以上面的为例，我们可以看出六边形由两个三角形和一个矩形构成。

思考一：我们有没有什么方法将这三个图形拼在一起？

思路：用伪元素：after和:before，然后在各自的区域绘制图形

参考代码如下：

  1. <!DOCTYPE html> 
  2. <html> 
  3.  
  4.     <head> 
  5.         <meta charset="UTF-8"> 
  6.         <title>六边形的制作</title> 
  7.         <style type="text/css"> 
  8.             #hexagon { 
  9.                 width: 100px; 
  10.                 height: 55px; 
  11.                 background: #fc5e5e; 
  12.                 position: relative; 
  13.                 margin: 100px auto; 
  14.             } 
  15.              
  16.             #hexagon:before { 
  17.                 content: ""; 
  18.                 width: 0; 
  19.                 height: 0; 
  20.                 position: absolute; 
  21.                 top: -25px; 
  22.                 left: 0; 
  23.                 border-left: 50px solid transparent; 
  24.                 border-right: 50px solid transparent; 
  25.                 border-bottom: 25px solid yellow; 
  26.             } 
  27.              
  28.             #hexagon:after { 
  29.                 content: ""; 
  30.                 width: 0; 
  31.                 height: 0; 
  32.                 position: absolute; 
  33.                 bottom: -25px; 
  34.                 left: 0; 
  35.                 border-left: 50px solid transparent; 
  36.                 border-right: 50px solid transparent; 
  37.                 border-top: 25px solid aqua; 
  38.             } 
  39.         </style> 
  40.     </head> 
  41.  
  42.     <body> 
  43.         <div id="hexagon"></div> 
  44.     </body> 
  45.  
  46. </html> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器