css arrow：箭头的尾巴是如何绘制的？

Question

我一直在研究如何通过css绘制不同的形状。我遇到了以下用于绘制小箭头形状的css代码：

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

我完全理解当我隐藏尾巴时箭头的尖端是如何绘制的（箭头：之后）和this post真正帮助我理解大部分绘制的形状。

然而我被困在如何使用边框绘制尾部。（我通过将其设置为透明隐藏了尖端）。这也是我的jsfiddle。

我看到他只将左上角边缘半径设置为border-radius: 20px 0 0 0;，但是为什么尾部左侧的末端变小但右侧就像一个切口？

我认为，好吧只绘制左上角（当border-radius需要4个值时，第一个是左上角然后是右上角等等。ref），所以如果我添加右上方，它应该加倍形状的长度，但体积减少。我的第二个陈述是正确的，但长度根本没有变化。 jsfiddle

Answer 1

所以基本上这是用几件事做的。我打破了以下代码段中的步骤：

body {
font-family: sans-serif;
}

#circle {
  height: 10px;
  width: 10px;
  border: 5px solid red;
  border-radius: 50%;
}

#circle2 {
  height: 10px;
  width: 10px;
  border: 5px solid red;
  border-radius: 50% 0 0 0;
}

#circle3 {
  height: 10px;
  width: 10px;
  border: solid;
  border-color: red transparent transparent transparent;
  border-width: 5px;
  border-radius: 50% 0 0 0;
}

#circle4 {
  height: 10px;
  width: 10px;
  border: solid;
  border-color: red transparent transparent transparent;
  border-width: 5px;
  border-radius: 50% 0 0 0;
  transform: rotate(45deg);
}

#circle5 {
  height: 10px;
  width: 12px;
  border: solid;
  border-color: red transparent transparent transparent;
  border-width: 5px 0 0 0;
  border-radius: 50% 0 0 0;
  transform: rotate(45deg);
}

#circle6 {
  width: 12px;
  height: 12px;
  border: solid;
  border-color: red transparent transparent transparent;
  border-width: 3px 0 0 0;
  border-radius: 20px 0 0 0;
  transform: rotate(45deg);
}

#square {
  height: 10px;
  width: 10px;
  border: 5px solid;
  border-color: red green grey black;
  border-radius: 50%;
}

#square2 {
  height: 10px;
  width: 10px;
  border: 5px solid;
  border-color: red green grey black;
  border-radius: 50% 0;
}

#square3 {
  height: 10px;
  width: 10px;
  border: 5px solid;
  border-color: red green grey black;
  border-radius: 50% 0;
  border-width: 5px 0;
}

.wrapper {
  background: #eeeeee;
  padding: 15px;
}

<p>
  1. Create a circle using border-radius
</p>
<div id="circle">
</div>
<br>
<p>
  2. Change the border-radius so that only one corner has it.
</p>
<div id="circle2">
</div>
<br>
<p>
  3. Remove all the other borders
</p>
<div id="circle3">
</div>
<br>
<p>
  4. Rotate the whole thing
</p>
<div id="circle4">
</div>
<br>
<p>
  5. Set the border-width to zero for all borders except border-top <br>(This creates the "cut" effect you described earlier, as the border-width goes from 5 to zero (from top to left)
</p>
<div class="wrapper">
  <p>
    For further demonstration: The combination of a varying border-radius and border-width creates this effect.</p>
  <p>
    Basic borders:
  </p>
  <div id="square"></div>
  <br>
  <p>
    Varying border-radius:
  </p>
  <div id="square2"></div>
  <br>
  <p>
    Varying border-radius and border-width:
  </p>
  <div id="square3"></div>
  <br>
  <p>
   Result:
  </p>
<div id="circle5">
</div>
</div>
<br>
<p>
  6. Change up the values
</p>
<div id="circle6">
</div>
<br>
<p>
  7. And you're done!
</p>
<div id="curvedarrow"></div>

Answer 2

你几乎可以像一步一步的程序一样阅读CSS

gl_FragColor.w *= alpha;