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，它包含所有箭头的部分（正文和头部）。使用:before和:after可以创建身体和头部。然后你可以使用一些border-radius规则来塑造身体的尖端（右侧，接触箭头的那个）。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

您还可以使用SVG获得类似的结果（信用转到VanseoDesign）。虽然这种方法可以提供更好的结果，但在我看来，它很难在HTML页面中进行操作和使用。 CSS更轻松，更容易修改。

＆＃13;

<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>

＆＃13;

此外，UTF-8 arrows可以是一种解决方案，但适应性最差：长度无法改变。因此，通过更改角色的font-size，你也可以改变头部的大小。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

你可以通过多种方式实现这一目标。

最好使用SVG，阅读here＆amp; here

或

纯CSS

.RightArrow {
  width: 50%;
  position: relative;
}

.line {
  margin-top: 8px;
  width: 97%;
  background: blue;
  height: 0.3em;
  float: left;
  position: absolute;
}

.point {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 37px solid blue;
  float: right;
}

<div class="RightArrow">
  <div class="line"></div>
  <div class="point"></div>
</div>

使用字体

div {
  font-size: 150px;
  color: red;
}

<div>&#8594;</div>

<div title="U+21A3"></div>

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

2 个答案: