我正在尝试使用 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;
}
最佳答案
不完美,但使用一些伪元素可以做到。
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";
}
关于css - 使用 css 从 ms word 重新创建 smartart 人字形列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19547185/