Such as:

The basic idea

Divide the sector into triangles. The whole circle is divided into 6 equal parts, i.e., each rounded Angle is 60°. The sector corresponds to an equilateral triangle.

We certainly know how to use CSS border to implement triangles, but how to implement an equilateral triangle?

Basic chestnut:

.triangle {
  width: 0;
  height: 0;
  border-width: 10px 10px 10px 10px;
  border-style: solid;
  border-color: #ff0000 transparent transparent transparent;
}

Copy the code

This will result in an isosceles right triangle with a 90° vertical Angle, which is obviously not enough, but we are halfway there by changing the border-width to reach a 60° foot. We divide the equilateral triangle from the top Angle into two right triangles with a 30° top Angle. The short side of the triangle is the border-width we set. The width of our border is r*cos(30°), and then we have an equilateral triangle (cos(30°) is an approximate value. So there must be some error).

Plan a

Draw an equilateral triangle, make six copies, and rotate each one 60 degrees more to form the prototype.

    <div class="circle-box1">
      <div class="item nth-0"></div>
      <div class="item nth-1"></div>
      <div class="item nth-2"></div>
      <div class="item nth-3"></div>
      <div class="item nth-4"></div>
      <div class="item nth-5"></div>
    </div>

Copy the code
$r: 100px;
$sin60: 0.866;
$borwid: $r / $sin60 / 2;
.circle-box1 {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  position: relative;
  border-radius: 100%;
  overflow: hidden;
  background: #ff0000;
  .item {
    width: 0;
    height: 0;
    border-width: $r $borwid 0 $borwid;
    border-style: solid;
    border-color: #ff0 transparent transparent transparent;
    position: absolute;
    left: $r - $borwid;
    top: 0;
    transform-origin: 50% 100%;
    &:nth-child(2n + 1) {
      border-color: # 333 transparent transparent transparent;
    }
    @for $i from 0 through 5 {
      &.nth-# {$i} {
        transform: rotate(60deg * $i)}}}}Copy the code

Scheme 2

An improved version of plan 1, in the above example, we could have formed four isosceles right triangles if the sides were not transparent, so now we have two diagonal equilateral triangles.

    <div class="circle-box2">
      <div class='circle'>
      </div>
    </div>
Copy the code
$r: 100px;
$sin60: 0.866;
$borwid: $r / $sin60 / 2;
.circle-box2 {
  width: 200px;
  height: 200px;
  text-align: center;
  margin: 50px auto;
  border-radius: 100%;
  overflow: hidden;
  background: #ff0000;
  .circle {
    display: inline-block;
    width: 0;
    height: 0;
    border-width: $r $borwid $r $borwid;
    border-style: solid;
    border-color: # 333 transparent #ff0 transparent;
    position: relative;
    box-sizing: border-box;
    &:before {
      content: ' ';
      display: block;
      width: 0;
      height: 0;
      border-width: $r $borwid $r $borwid;
      border-style: solid;
      border-color: #ff0 transparent # 333 transparent;
      position: absolute;
      left: -$borwid;
      top: -$r;
      transform: rotate(60deg)
    }
    &:after {
      content: ' ';
      display: block;
      width: 0;
      height: 0;
      border-width: $r $borwid $r $borwid;
      border-style: solid;
      border-color: #ff0 transparent # 333 transparent;
      position: absolute;
      left: -$borwid;
      top: -$r;
      transform: rotate(-60deg)}}}Copy the code

Plan 3

Plan three draws lessons from an example of the desert of Quan Youfa. Different from the original scheme, this sector is realized by masking the circle and then cutting it with clip.

    <div class="circle-box3">
      <div class="circle"></div>
      <div class="circle turn"></div>
    </div>
Copy the code
.circle-box3 {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  position: relative;
  background: #ff0000;
  border-radius: 100%;
  overflow: hidden;
  .circle {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 100%;
    overflow: hidden;
    clip: rect(0.$r * 2.$r.0);
    &.turn {
      transform: rotateX(180deg);
      &:before {
        background-image: linear-gradient(60deg.# 333 50%.#ff0 0);
      }
      &:after {
        background-color: # 333;
      }
    }
    &:before{
      content: ' ';
      display: block;
      width: 100%;
      height: 100%;
      background: #ff0;
      background-image: linear-gradient(60deg.#ff0 50%.# 333 0);
      position: absolute;
      left: 0;
      top: 0;
    }
    &:after {
      content: ' ';
      display: block;
      width: 100%;
      margin-left: 50%;
      height: 100%;
      background-color: #ff0;
      transform-origin: left;
      transform: rotate(30deg);
      position: absolute;
      left: 0;
      top: 0; }}}Copy the code

There are a few things to note:

  1. CSS transform-origin defines the center point of rotation

  2. Clip rect(top, right, bottom, left), where right and bottom are evaluated based on the upper left corner.

  3. CSS linear gradient linear-gradient

  4. CSS transform: rotate() Rotate based on an axis

conclusion

Before implementation is already thought, that is, the approximation of the above problems, at the time of rendering, also including the calculation of time, 60 ° scheme one form of triangle can only say that approximately 60 °, as a result of there is a gap between the fan, so the above code, the bounding box set the red background, in order to highlight the gap, You can solve this problem by setting the background color to match the sector color.

The implementation of scheme three may be a little less troublesome, but the 60° Angle drawn here can be considered basically accurate. It is also relatively good in terms of HTML structure.

In the CSS world, there are a variety of techniques, so there should be more than three solutions. However, the blogger’s own skills are limited, welcome god to give a better plan.

supplement

Well, it is embarrassing to forget the requirement of absolute centralization in the title. There are many solutions for absolute centralization, so I won’t introduce them here

The original link