html - 如何创建带有箭头显示到下一个圆圈的圆 div

Question

如何制作带有箭头的 div，如步骤或流程。下面是我想要做的图像:

<div class="container" style="margin-top: 20px;">
  <div class="row">
    <div class="col-sm-4">
      <span class="fa-stack fa-4x">
        <i class="fa fa-circle fa-stack-2x text-primary"></i>
        <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
      </span>
      <h4 class="service-heading">1. First Step</h4>
      <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
    <div class="col-sm-4">
      <span class="fa-stack fa-4x">
        <i class="fa fa-circle fa-stack-2x text-primary"></i>
        <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
      </span>
      <h4 class="service-heading">2. Second Step</h4>
      <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
    <div class="col-sm-4">
      <span class="fa-stack fa-4x">
        <i class="fa fa-circle fa-stack-2x text-primary"></i>
        <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
      </span>
      <h4 class="service-heading">3. Third Step</h4>
      <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </div>
</div>

这是 demo 我的代码。

Answer 1

这里有一个简单的方法，您可以仅使用伪元素通过 CSS 创建箭头。在下面的代码中，我创建了一个 .arrow 类，它包含箭头的所有部分( body 和头部)。使用 :before和 :after你可以创建 body 和头部。然后你可以使用一些 border-radius 规则来设计你 body 的尖端(右侧，接触箭头头部的那个)。

.arrow {
  width: 100px;
  height: 10px;
  position: relative;
}

.arrow:before {
    content: " ";
    width: 114px;
    height: 5px;
    background-color: black;
    display: inline-block;
    top: 4px;
    position: absolute;
    border-top-right-radius: 30%;
    border-bottom-right-radius: 30%;
}

.arrow:after {
    content: " ";
    display: inline-block;
    font-style: normal;
    position: absolute;
    width: 0.6em;
    height: 0.6em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
    margin-left: 100px;
}

<div class="arrow"></div>

您也可以使用 SVG 获得类似的结果(信用转至 VanseoDesign)。虽然这种方法提供了更好的结果，但在我看来，在 HTML 页面中操作和使用它是相当困难的。 CSS 更轻巧且更易于修改。

<svg width="600px" height="100px">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="black" />
    </marker>
  </defs>

  <line x1="50" y1="50" x2="250" y2="50" stroke="black" stroke-width="5" marker-end="url(#arrow)" />
</svg>

此外，UTF-8 arrows可以是一个解决方案，但这是最不适应的:长度不能改变。因此，通过更改字符的 font-size，您还可以更改头部的大小。

.arrow>p {
  display: inline-block;
  font-size: 200px;
  padding: 0px;
  margin: 0px
}

<div class="arrow">
  <p>&#8594;</p>
  <p>&#x2192;</p>
  <p>&rarr;</p>
</div>

如果我是你，我会 100% 选择 CSS。这是修改后的 JS Fiddle .当更改为不同的窗口大小时，您会注意到 Bootstrap 将调整 Logo 容器之间的间距。这反过来会使箭头太短...这可以通过一些媒体查询和更多 CSS 来解决。