CSS3八等分圆的写法

CSS3八等分圆的写法

因为要写一个小的案例，所以在网上找了很多8等分圆的写法，但是没有遇到一个合适的，dom元素都不是很好控制，所以自己总结了一下的写法，不足之处请多指正，我立马改。

css代码 ：

• {
  margin: 0;
  padding: 0;
  }
  .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8 {
  width: 0;
  border: 200px solid transparent;
  border-top-color: #ffc0cb;
  border-left: none;
  border-bottom: none;
  transform-origin: left 100%;
  transform: rotate(90deg);
  margin-left: 252px;
  }

   .c2 {
       transform: rotate(135deg);
       margin-left: 251px;
       margin-top: -199px;
   }
  
   .c3 {
       transform: rotate(180deg);
       margin-left: 250px;
       margin-top: -200px;
   }
  
   .c4 {
       transform: rotate(225deg);
       margin-left: 250px;
       margin-top: -200px;
   }
  
   .c5 {
       transform: rotate(270deg);
       margin-left: 250px;
       margin-top: -201px;
   }
  
   .c6 {
       transform: rotate(315deg);
       margin-left: 250px;
       margin-top: -202px;
   }
  
   .c7 {
       transform: rotate(360deg);
       margin-left: 251px;
       margin-top: -200px;
   }
  
   .c8 {
       transform: rotate(45deg);
       margin-left: 251px;
       margin-top: -198px;
   }
  
   .circle {
       height: 500px;
       width: 500px;
       border-radius: 50%;
       border: 1px solid black;
       margin-left: -150px;
       position: absolute;
       margin-top: -100px;
       box-sizing: border-box;
       overflow: hidden;
   }
  
   .container {
       position: relative;
       width: 200px;
       height: 200px;
       border-radius: 50%;
       margin: auto;
       overflow: hidden;
   }
  
   .line1,.line2,.line3,.line4 {
       width: 0;
       height: 200px;
       border: 1px solid white;
       position: absolute;
       left: 100px;
   }
  
   .line2 {
       transform: rotate(45deg);
   }
  
   .line3 {
       transform: rotate(90deg);
   }
  
   .line4 {
       transform: rotate(135deg);
   }
  

html 代码：

不太清楚为什么html代码写上了却显示不到页面中去，所以将html代码截图给大家看一下，希望能帮助大家。
这样的写法我们就能很方便的去控制每一个8分之圆的样式。