Question

我正在尝试创建一个工作流程，在步骤之间我需要一个箭头。我在步骤div上使用伪元素：after在步骤之间创建了一条线，但不知道如何在该行的末尾放置一个箭头。到目前为止，我已经编写了以下代码。

.step-items {
    display: flex;
    flex-flow: row nowrap;
    position: relative;
    justify-content: center;
}

.steps {
    margin: 1em;
    border-radius: 10%;
    height: 5em;
    padding: 1rem;
    width: 7rem;
    height: 4rem;
    position: relative;
    color: #fff;
    background: linear-gradient(45deg, #00abff, #45e5c3);
}

.steps:after {
    content: "";
    position: absolute;
    height: 2px;
    width: 22%;
    top: 2em;
    left: -2em;
    color: #00abff;
    background-color: #00abff;
}

.steps:first-child::after {
    content: none;
    display: none;
}

<div class="step-items">
  <div class="steps">
    Item 1
  </div>

  <div class="steps">
    Item 2
  </div>
</div>

fiddle to the current code

Answer 1

我尝试使用content属性添加一个简单的箭头，但它并不完全对齐。希望对您有所帮助。

.steps:after {
  content: ">";
  position: absolute;
  text-align: right;
  line-height: 2px;
  height: 2px;
  width: 22%;
  top: 2em;
  left: -2em;
  color: #00abff;
  background-color: #00abff;
}

Answer 2

我添加了

.steps:first-child::before {
    content: '▶︎';
    position: relative;
    display: block;
    left: calc(100% + 36px);
    color: #00abff;
    top: 8px;
}

到您的CSS。我认为它应该可以完成您想做的事情。

链接到已编辑的小提琴：https://jsfiddle.net/z157kfor/4。

有关改进当前代码的建议：

与其在::after上设置.steps，然后在第一个孩子上隐藏::after，不如将::after添加到:nth-child(2)。 / p>
我认为将箭头的主体和箭头头作为伪元素添加到同一元素上（更理想的是第一个元素，因为箭头通常是从起点到终点绘制的），这更直观。

Answer 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Line arrow</title>
<style type="text/css">
.box {
    width: auto;
    height: 400px;
    margin: 4em 20px;
    border: 1px dashed;
    position: relative;
}

.line-arrow {
    position: absolute;
    overflow: hidden;
    display: inline-block;
    font-size: 12px; /*set the size for arrow*/
    width: 4em;
	  height: 4em;
    margin-top: -2em;
    top: 50%;
}

.line-arrow.left {
    border-top: 1px solid #a9a9a9;
	  border-left: 1px solid #a9a9a9;
    transform: rotate(-54deg) skew(-20deg);
    left: 20px;
}

.line-arrow.right {
  	border-top: 1px solid #a9a9a9;
	  border-right: 1px solid #a9a9a9;
    transform: rotate(54deg) skew(20deg);
    right: 20px;
}

.line-arrow:active,
.line-arrow.active {
    border-width: 2px;
}

.square {
  top: auto;
  bottom: 10px;
}

.square.left {
  transform: rotate(-45deg);
}

.square.right {
  transform: rotate(45deg);
}

</style>
</head>

<body>
<div class="box">
    <a class="line-arrow left active" href="javascript:;"></a>
  <p style="background-color:red"><marquee behaviour="scroll" onmouseover="this. stop()" onmouseout="this. start()" >Md Rakibul hasan</marquee></p>
    <a class="line-arrow right" href="javascript:;"></a>
      <a class="line-arrow square left" href="javascript:;"></a>
      <a class="line-arrow square right" href="javascript:;"></a>
</div>
</body>

</html>

尝试这个.................

在CSS中用一条线创建一个箭头

3 个答案: