I need to do this: Divide a circle on 12 parts I Try this:

    <ul >
      <li ><div >1</div></li>
      <li ><div >2</div></li>
      <li ></li>
    </ul>
    <style>
      .circle {
        position: relative;
        border: 1px solid black;
        padding: 0;
        margin: 1em auto;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        list-style: none;
        overflow: hidden;
      }
      li {
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 50%;
        transform-origin: 0% 100%;
      }
      .text {
        position: absolute;
        left: -100%;
        width: 200%;
        height: 200%;
        text-align: center;
        -webkit-transform: skewY(60deg) rotate(15deg);
        -ms-transform: skewY(60deg) rotate(15deg);
        transform: skewY(60deg) rotate(15deg);
        padding-top: 20px;
      }
      .slide1 {
        -webkit-transform: rotate(0deg) skewY(-60deg);
        -ms-transform: rotate(0deg) skewY(-60deg);
        transform: rotate(0deg) skewY(-60deg);
      }
      .slide2 {
        -webkit-transform: rotate(30deg) skewY(-60deg);
        -ms-transform: rotate(30deg) skewY(-60deg);
        transform: rotate(30deg) skewY(-60deg);
      }
      .slide1 .text {
        cursor: pointer;
        background: green;
      }
      .slide2 .text {
        cursor: pointer;
        background: orange;
      }
    </style>

But I need to divide the circle into two parts instead of 12, I don't quite understand the logic of the transformations they use, remove the 10 extra div but it doesn't I can manipulate the size of the remaining ones so that they take up 50% of the circle. Does anyone know how? I need to divide the circle into two divs to be able to put a JavaScript event on each part

CodePudding user response：

.circle {
  position: relative;
  border: 1px solid black;
  padding: 0;
  margin: 1em auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
  
  display: grid;
  grid-template-columns: 1fr 1fr; /* splitting the circle into 2, equally sized columns/semi-circles */
}

li {
  overflow: hidden;
  width: 100%;
  height: 100%;
  
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  font-size: 5rem
}

.slide1 {
  cursor: pointer;
  background: green;
}

.slide2 {
  cursor: pointer;
  background: orange;
}

<ul >
  <li >
    <div >1</div>
  </li>
  <li >
    <div >2</div>
  </li>
</ul>