html - 可以在列之间创建一个带有三 Angular 形的表头吗？

Question

我正在尝试创建一个自定义表格标题，在列之间带有箭头，如下图所示。谁知道该怎么做？

代码:

  .table tr {
      cursor: pointer;
  }
    .im-header {
    width: 20%;
    text-align:center;
    cursor: default;
  }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>
<table class="table" style="border-collapse:collapse;">
<thead class="thead-dark">
<tr>
	<th scope="col" class="im-header"></th>
	<th scope="col" class="im-header">Konceptualisering</th>
	<th scope="col" class="im-header">Proof of concept</th>
	<th scope="col" class="im-header">Produktvalidering</th>
	<th scope="col" class="im-header">Produktlansering</th>
</tr>
</thead>
</table>

Answer 1

.nav-wrap {
  border: 1px solid green;
  position: relative;
}

.nav-wrap ul {
  display: table;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.nav-wrap ul li {
  background: #fff;
  border-right: 1px solid green;
  display: table-cell;
  vertical-align: middle;
  width: 1%;
  height: 50px;
}

.nav-wrap ul li:last-child,
.nav-wrap ul li.active {
  border-right: none;
}

.nav-wrap ul li.active {
  background: green;
}

.nav-wrap ul li .step:before,
.nav-wrap ul li .step:after {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  content: "";
  display: none;
  margin: -10px 0 0 0;
  position: absolute;
  top: 50%;
}

.nav-wrap ul li:last-child .step:before,
.nav-wrap ul li:last-child .step:after {
  display: none;
}

.nav-wrap ul li .step:before {
  border-left: 10px solid green;
  right: -10px;
  z-index: 2;
}

.nav-wrap ul li.active .step:before {
  border-left: 10px solid green;
}

.nav-wrap ul li .step:after {
  border-left: 10px solid green;
  right: -11px;
  z-index: 1;
}

.nav-wrap ul li .step {
  box-sizing: border-box;
  display: block;
  font-size: 10px !important;
  font-weight: bold;
  line-height: 12px !important;
  padding: 9px 0;
  position: relative;
  text-align: center;
}

.nav-wrap ul li .step span {
  display: block;
  font-size: 12px !important;
  font-weight: bold;
  line-height: 12px !important;
  z-index: 3;
}

.nav-wrap ul li .step span {
  color: #000;
}

.nav-wrap ul li.active .step span {
  position: static;
}

.nav-wrap ul li .step:before,
.nav-wrap ul li .step:after {
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  display: block;
  margin: -25px 0 0 0;
}

.nav-wrap ul li .step:before {
  border-left: 25px solid #fff;
  right: -25px;
}

.nav-wrap ul li.active .step:before {
  border-left: 25px solid green;
}

.nav-wrap ul li .step:after {
  border-left: 25px solid green;
  right: -26px;
}

.nav-wrap ul li .step span,
{
  left: 12px;
  position: relative;
  top: auto;
}

.nav-wrap ul li:first-child .step span,
{
  left: 0;
}

<div class="nav-wrap">
  <ul>
    <li class="active"><span class="step"><span>Select</span></span>
    </li>
    <li><span class="step"><span>Confirm</span></span>
    </li>
    <li><span class="step"><span>Finish</span></span>
    </li>
  </ul>
</div>

此解决方案使用 div，但您应该能够满足您的需求。