html - CSS 箭头向下箭头

Question

我很难按照我的意愿设计这个箭头。

现在我被一个实心三 Angular 形困住了，我正试图把它变成一个“细线”箭头，如下所示:http://davidkelley.me/2013/03/01/css-hairline-arrows.html .

Fiddle

.hairline-down-arrow {
  border: 1px solid black;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  background-color: white;
}
.hairline-down-arrow:after {
  content: "";
  position: relative;
  top: 44px;
  left: 15px;
  border-top: solid 25px black;
  border-right: solid 15px transparent;
  border-bottom: solid 25px transparent;
  border-left: solid 15px transparent;
}

<section class="hairline-down">
  <div class="hairline-down-arrow"></div>
</section>

有什么帮助吗？谢谢。

Answer 1

为什么不直接使用 svg？

<svg width="70" height="55" viewBox="-2.5 -5 75 60" preserveAspectRatio="none">
  <path d="M0,0 l35,50 l35,-50" fill="none" stroke="black" stroke-linecap="round" stroke-width="5" />
</svg>

---

或者您可以使用 :pseudo-element。

div {
  position: relative;
  width: 80px;
  height: 1px;
  background: black;
  transform: rotate(55deg);
  transform-origin: 0% 0%;
}
div:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 100%;
  background: black;
  transform: rotate(-110deg);
  transform-origin: 0% 100%;
}

<div></div>