用CSS写一个六边形（附：2种方法）_web前端

这里我们用2种方法来写；
效果图
在这里插入图片描述
第一种方法
:nth-child（选择器）

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
HTML代码

<body>
   <div class="div">
     <ul>
         <span></span>
         <span></span>
         <span></span>
     </ul>
   </div>

CSS代码

   <style>
     *{
       margin: 0px;
       padding: 0px;
     }
     .div{
       width: 500px;
       height: 500px;
       margin:  auto;
     }
     ul{
       padding: 34% 30%;
     }
     /*CSS3新增元素选择第几个子元素*/
     span:nth-child(1){
       position: absolute;/*绝对定位把行内元素转化为定位元素*/
       width: 215px;
       height: 125px;
       background-color: rgba(0, 0, 0, 0.5) ;
     }
    span:nth-child(2){
      position: absolute;
      width: 215px;
      height: 125px;
      background-color: rgba(0,0,0,0.5);
      transform: rotate(60deg);/*定义2D选择*/
    }
    span:nth-child(3){
      position: absolute;
      width: 215px;
      height: 125px;
      background-color: rgba(0,0,0,0.5);
      transform: rotate(120deg);
    }
   </style>

第二种方法
伪元素

:after 伪元素在元素之后添加内容默认地，这个伪元素是行内元素

:before 伪元素在被选元素的内容前面插入内容。这个伪元素是行内元素

两者区别

:before 和 :after将在内容元素的前后插入额外的元素；:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性。

HTML代码

<body>
    <div class="div">
        <ul>
            <li></li>
        </ul>
    </div>
</body>

CSS代码

 <style>
      *{
          margin: 0px;
          padding: 0px;
      }
      .div{
          width: 500px;
          height: 500px;
          margin: auto;
      }
      ul{
          padding: 34% 30%;
          list-style: none;
      }
       li{
           width: 215px;
           height: 125px;
           background-color:rgba(0,0,0,0.5);
       }
       /*after 伪元素在元素之后添加内容 默认地，这个伪元素是行内元素*/
       li::after{
           content: "";
           position: absolute;/*把行内的元素转化为position元素*/
           width: 215px;
           height: 125px;
           background-color: rgba(0,0,0,0.5);
           transform: rotate(60deg);/*定义2D选择*/
       }
       /* :before 选择器在被选元素的内容前面插入内容。 */
       li::before{
           content: "";
           position: absolute;
           width: 215px;
           height: 125px;
           background-color: rgba(0,0,0,0.5);
           transform: rotate(120deg);/*定义2D选择*/
       }
    </style>

方法不一，请根据实际情况选择。