[分享]css八边形遮罩层

CSS八边形遮罩层是一种常用于页面设计的技巧，可以增加页面的视觉层次和吸引力。下面我们来了解一下如何使用CSS实现八边形遮罩层。首先，我们需要先创建一个正方形的div元素，然后通过CSS的transf...

CSS八边形遮罩层是一种常用于页面设计的技巧，可以增加页面的视觉层次和吸引力。下面我们来了解一下如何使用CSS实现八边形遮罩层。

首先，我们需要先创建一个正方形的div元素，然后通过CSS的transform属性来将其变换成八边形。代码如下：

 .hexagon {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #333;
    transform: rotate(45deg);
  }
  .hexagon:before,
  .hexagon:after {
    content: "";
    position: absolute;
    border: 50px solid transparent;
    z-index: 1;
  }
  .hexagon:before {
    left: 0;
    border-right-color: #333;
    border-left: none;
  }
  .hexagon:after {
    right: 0;
    border-left-color: #333;
    border-right: none;
  } 

这样，我们就可以得到一个八边形的遮罩层了。接下来，我们可以将其用于页面设计中，例如作为图片遮罩层、文字背景等等。代码如下：

 <div class="hexagon">
    <img src="example.jpg" alt="例图">
  </div>
  
  <div class="hexagon">
    <p>这是一段文字</p>
  </div> 

通过这种方式，我们可以让八边形遮罩层更加灵活地应用于页面设计中，让页面更加生动有趣。