Question

我需要在网页上绘制一个弧形，以在一个符号中显示多个风向。如果我只需要90度分辨率，这将非常容易：

.arc0, .arc90, .arc180, .arc270 {
    border-color: black white white;
    border-left: 15px solid white;
    border-radius: 50%;
    border-right: 15px solid white;
    border-style: solid;
    border-width: 15px;
    height: 150px;
    width: 150px;
}
.arc90{
    transform: rotate(90deg);
}
.arc180{
    transform: rotate(180deg);
}
.arc270{
    transform: rotate(270deg);
}

但是，我需要45度分辨率，所以弧度应该只有45度宽，然后我再以22.5度的步幅旋转。

我希望这是一个轻量级的解决方案。

Answer 1

.windrose {
  position: relative;
  margin:   50px auto;
  width:    200px;
  height:   200px;
  border-radius: 50%;
  transform:     rotate(22.5deg);
}
.windrose > div {
  overflow: hidden;
  position: absolute;
  top:   -20px;
  right:  50%;
  bottom: 50%;
  left:  -20px;
  transform-origin: 100% 100%;
}

.windrose > div:before {
  content: '';
  box-sizing: border-box;
  display:block;
  width:200%;
  height:200%;
  border-radius:50%;
  border-width:20px;
  border-style:solid;
  border-color:lightgray;
  transform: skewX(-45deg);
}

.arc-nn {transform: rotate(45deg)  skewX(45deg);}
.arc-ne {transform: rotate(90deg)  skewX(45deg);}
.arc-ee {transform: rotate(135deg) skewX(45deg);}
.arc-se {transform: rotate(180deg) skewX(45deg);}
.arc-ss {transform: rotate(225deg) skewX(45deg);}
.arc-sw {transform: rotate(270deg) skewX(45deg);}
.arc-ww {transform: rotate(315deg) skewX(45deg);}
.arc-nw {transform: rotate(360deg) skewX(45deg);}

.windrose > div.dangerous:before{border-color:red;}
.windrose > div.protected:before{border-color:green;}
.windrose > div.swells:before   {border-color:blue;}

<div class='windrose'>
  <div class='arc-nn dangerous'></div>
  <div class='arc-ne dangerous'></div>
  <div class='arc-ee dangerous'></div>
  <div class='arc-se'></div>
  <div class='arc-ss swells'></div>
  <div class='arc-sw protected'></div>
  <div class='arc-ww protected'></div>
  <div class='arc-nw'></div>
</div>

感谢Ana for the nice idea

使用带有45度段的CSS3绘制圆弧

1 个答案: