多边形

<div>

      <ul>

        <li class="hexagon_box_04">

          <div class="box1 box"></div>

          <div class="box2 box">

            <div class="round"></div>

          </div>

          <div class="box3 box"></div>

        </li>

      </ul>

    </div>

----------------------------style----------------------------------

.hexagon_box_04 {

  position:relative;

}

.box{

  position: absolute;

    top: 0;

    left: 0;

  width: 30px;

  height: 18px;

  border-left: 1px solid #ffdb26;

}

.hexagon_box_04 .box1 {

  transform: rotate(60deg);

}

.hexagon_box_04 .box2 {

}

.round{

  width: 12px;

    height: 12px;

    margin: 3px auto;

    border-radius: 50%;

    border: 1px solid #ffdb26;

}

.hexagon_box_04 .box3 {

  transform: rotate(-60deg);

}