css - 使用 css 从 ms word 重新创建 smartart chevron 列表

Question

我正在尝试使用 CSS 将 Microsoft Word 的垂直 V 形列表重新创建到页面，以便我可以创建多个分步列表，例如这样（如图所示）。

我能够创建小盒子，但没有任何类似于图像的东西

.stepbystep {
    border:5px solid rgb(65,47,143);
    background-color: rgb(222,221,228);
    color:  rgb(65,47,143);
    margin: 0px 20px;
    padding: 10px 50px 10px 150px;
    background:  url(../graphics/common/step.png) top left no-repeat;
    min-height: 80px;
}

Answer 1

不完美，但使用一些伪元素就可以做到。

Codepen 演示

HTML

<nav role='navigation'>
  <ul>
    <li><a class="one" href="#">Wake Up</a></li>
    <li><a class="two" href="#">Step 2</a></li>
    <li><a class="three" href="#">Step 3</a></li>
    <li><a class="four" href="#">Step 4</a></li>
  </ul>
</nav>

CSS

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

ul {
  list-style:none;
  width:250px;
  margin:25px auto;
 }

li {
  text-align:center;
  margin-bottom:25px;
  position:relative;
  padding-left:50px;
}

a {
  text-decoration:none;
  color:darkblue;
  font-weight:bold;
  display:block;
  background:white;
  height:50px;
  border:1px solid darkblue;
  position:relative;
  border-radius: 0 8px 8px 0;
  line-height:50px;
}


a:before {
  color:white;
  background:darkblue;
  width:50px;
  height:50px;
  margin-left:-50px;
  line-height:80px;
  position:absolute;
  top:-1px;
  left:0;
  font-size:0.75em;
  text-align:center;
}

li:before,
li:after {
  position:absolute;
  content:"";
  left:0;
  border:25px solid transparent;
  height:0;
  width:0;
  z-index: 25;
}

li:before {
  top:0;
  border-top-color:white;
}

li:after {
  top:100%;
  border-top-color:darkblue;;
}

.one:before {
    content:"Step 1";
}

.two:before {
    content:"Step 2";
}

.three:before {
    content:"Step 3";
}

.four:before {
    content:"Step 4";
}