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

[html5]CSS3画正六边形的方法与源代码实例

时间:2017-08-20 21:28酷播
经常在别人家的网页上看到各中好看图形,其中就有正六边形和组合的蜂窝状图形。今天我们来盘点一下,网页上有哪些姿势实现这个效果

[html5]CSS3画正六边形的方法与源代码实例

经常在别人家的网页上看到各中好看图形,其中就有正六边形和组合的蜂窝状图形。今天我们来盘点一下,网页上有哪些姿势实现这个效果

<div class="lb01"></div>

  1. /*css*/ 
  2. .lb01 { 
  3.     position: relative; 
  4.     width: 200px; 
  5.     height: 120px; 
  6.     background-color: red; 
  7.     margin: 100px; 
  8. .lb01:after { 
  9.     content: ""; 
  10.     position: absolute; 
  11.     display: block; 
  12.     top: -160px; 
  13.     width: 0; 
  14.     height: 0; 
  15.     border: 100px solid transparent; 
  16.     border-bottom: 60px solid red; 
  17. .lb01:before { 
  18.     content: ""; 
  19.     position: absolute; 
  20.     display: block; 
  21.     bottom: -160px; 
  22.     width: 0; 
  23.     height: 0; 
  24.     border: 100px solid transparent; 
  25.     border-top: 60px solid red; 

 

热门文章推荐

请稍候...

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

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