是否有可能使这些箭头与html和CSS？

Question

我正在尝试使用HTML和CSS而不是图像来显示一些箭头-这是图像：

我正在尝试在伪元素之前和之后绘制这些箭头，但是我遇到了问题。

这是我的代码：

HTML：

Wrapper w = gson.fromJson(new FileReader("c:\\file.json"), Wrapper.class );
w.getPatients().keySet().... // or however it is most comfortable

SASS：

<ul class="steps-list">
      <li class="step-item">
        <a href="#" class="step-link">Contact us</a>
      </li>
      <li class="step-item">
        <a href="#" class="step-link">Consult with RCIC</a>
      </li>
      <li class="step-item">
        <a href="#" class="step-link">Apply via your pathway</a>
      </li>
      <li class="step-item">
        <a href="#" class="step-link">Settle in Canada</a>
      </li>
</ul>

我通过以下方式关注了这篇文章： https://css-tricks.com/snippets/css/css-triangle/

Answer 1

Check this site

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
}

.container {
	font-family: 'Lato', sans-serif;
	width: 1000px;
	margin: 0 auto;
}

.wrapper {
	display: table-cell;
	height: 400px;
	vertical-align: middle;
}

.nav {
	margin-top: 40px;
}






.arrow-steps .step {
	font-size: 14px;
	text-align: center;
	color: #666;
	cursor: default;
	margin: 0 3px;
	padding: 10px 10px 10px 30px;
	min-width: 180px;
	float: left;
	position: relative;
	background-color: #d9e3f7;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
  transition: background-color 0.2s ease;
}

.arrow-steps .step:after,
.arrow-steps .step:before {
	content: " ";
	position: absolute;
	top: 0;
	right: -17px;
	width: 0;
	height: 0;
	border-top: 19px solid transparent;
	border-bottom: 17px solid transparent;
	border-left: 17px solid #d9e3f7;	
	z-index: 2;
  transition: border-color 0.2s ease;
}

.arrow-steps .step:before {
	right: auto;
	left: 0;
	border-left: 17px solid #fff;	
	z-index: 0;
}

.arrow-steps .step:first-child:before {
	border: none;
}

.arrow-steps .step:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.arrow-steps .step span {
	position: relative;
}

<div class="container">	
<div class="wrapper">	
<div class="arrow-steps clearfix">
          <div class="step current"> <span> Step 1</span> </div>
          <div class="step"> <span>Step 2 some words</span> </div>
          <div class="step"> <span> Step 3</span> </div>
          <div class="step"> <span>Step 4</span> </div>
			</div>
		
</div>
</div>

Answer 2

[编辑]再次查看您的图像后，我无法解释第一个平坦的元素。我已经更新了答案。

使用前，后和第n个子选择器，您可以实现图像中显示的内容。之前和之后的伪元素用于创建箭头的顶部和底部，而第n个子选择器用于使箭头看起来逐渐靠近。

if let button = textField.firstParent(ofType: CustomButton.self) {
  //Do button stuff here
}

.steps-list {
  display: flex;
  list-style: none;
}

.steps-list .step-item {
  position: relative;
  display: flex;
  align-items:center;
  text-align: center;
  width: 25%;
}

.steps-list .step-item .step-link {
  font-weight: bold;
  width: 100%;
  display: inline-block;
  padding:10px 5px;
  box-sizing:border-box;
}

.step-link::before {
  content: "";
  display: block;
  position: absolute;
  transform: skew(-40deg, 0);
  background: #e2e3e4;
  height: 50%;
  bottom: 0;
  z-index: -1;
  left:5px;
}
.step-link::after {
  content: "";
  display: block;
  position: absolute;
  transform: skew(40deg, 0);
  background: #e2e3e4;
  height: 50%;
  top: 0;
  z-index: -1;
  left:5px;
}
.step-item:nth-child(1){
  overflow:hidden;
}
.step-item:nth-child(1) .step-link::after {
  width:95%;
  left:-15px;
}

.step-item:nth-child(1) .step-link::before {
  width: 95%;
  left:-15px;
}

.step-item:nth-child(2) .step-link::after {
  width: 90%;
}

.step-item:nth-child(2) .step-link::before {
  width: 90%;
}

.step-item:nth-child(3) .step-link::after {
  width: 95%;
}

.step-item:nth-child(3) .step-link::before {
  width: 95%;
}

.step-item:nth-child(4) .step-link::after {
  width: 100%;
}

.step-item:nth-child(4) .step-link::before {
  width: 100%;
}