用 CSS3 绘制 45 度的圆弧

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