CSS 箭头 : how is the arrow's tail drawn?

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>