[CSS] Draw a fan with any angle

Now there is such a demand, we use html and css to draw such a graphic (sry, I don't know how to remove this watermark, o(╯□╰)o):

The first thing we might think of is to draw triangles first, and then use border-radius. Yes, I think so too. For example, the div element is like this:

  <div style="
    width: 0;
    height: 0;
    border:50px solid cornflowerblue;
    border-right: 50px solid greenyellow;
    border-left:  50px solid greenyellow;
    border-radius: 50%;
    transform: rotate(-45deg)
    "
  >
  </div>

The result is as follows, other cases can be achieved by rotating multiple divs to overlap.

But look at our needs above. . The base shape is a 60-degree sector. . . How to fix. . . , We only have to think of other ways, and also thought of multiple 1/4 circles, to do the rotation, but it doesn't work!

------Dividing line------

I made a mistake before, I took it for granted that the width of the border is set to be the same, of course, it is a right angle. But we can also construct a 60-degree triangle. We set border-bottom /border-top and border-left/border-right differently. Calculate it and you can get it, but it cannot be assembled according to a single block. a circle:

How to solve it in the end? It is solved by the transformation function transform function: skew of css3. This one has to walk once before you know how to tilt (I understand it as flipping a certain angle).

We won't go into detail about this attribute, go down it yourself, or click this link to view other applications.

Our idea is as follows:

Draw a circle, then define a child element, and then slant it to look like this:

Well, the problem of this angle is solved by skew, we just need to rotate this element:

Now that we have reached this point, we compare the present and the demand, and we know what to do, right? ! In fact, the key is to find the shape of an angle through skew, and then the definition of the initial position of the rotation transform-origin . Although I used skew before, but I forgot!

You can also click this link to view the various situations of transform-origin

Here is the complete code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>扇形</title>
  <style>
  

.pie {
	position: relative;
	margin: 1em auto;
	padding: 0;
	width: 32em;
  height: 32em;
	border-radius: 50%;
	list-style: none;
  overflow: hidden;
}
.slice {
	overflow: hidden;
	position: absolute;
	top: 0;
  right: 0;
	width: 50%;
  height: 50%;
	transform-origin: 0% 100%;
}
.slice-one {
  transform: rotate(30deg) skewY(-30deg);
  background: black;
}
.slice-two {
  transform: rotate(-30deg) skewY(-30deg);
  background: yellow;
}
.slice-three {
  transform: rotate(-90deg) skewY(-30deg);
  background: black;
}
.slice-four {
  transform: rotate(-150deg) skewY(-30deg);
  background: yellow;
}
.slice-five {
  transform: rotate(-210deg) skewY(-30deg);
  background: black;
}
.slice-six {
  transform: rotate(-270deg) skewY(-30deg);
  background: yellow;
}

  </style>
</head>
<body>

<ul class='pie'>
    <li class='slice-one slice'> </li>
    <li class='slice-two slice'> </li>
    <li class='slice-three slice'> </li>
    <li class='slice-four slice'> </li>
    <li class='slice-five slice'> </li>
    <li class='slice-six slice'> </li>
  <ul>
</body>
</html>

In fact, I'm not original, I just use other people's inspiration to complete this topic, click me for the original link . Thanks to those who are willing to share~

Idea 2: Conic-gradient angular gradient, try again later

[CSS] Draw a fan with any angle

Guess you like