在HTML/CSS/JS中创建箭头条
在HTML/CSS/JS中创建箭头条
提问于 2017-05-26 04:13:36
我正在尝试创建一个进度箭头栏，它看起来类似于上图。我从一组列(四列-sm-4)开始，不知道从哪里开始。
回答 3
Stack Overflow用户
发布于 2017-05-26 04:20:01
我用你想要的形状做了一个(受this post启发的) div：
.container{
width: 100%;
position: relative;
display: flex;
flex-direction: row;
}
.v-div {
width: 0;
height: 0;
border-bottom: 40px solid transparent;
border-top: 40px solid transparent;
border-left: 25px solid #f00;
}
.box{
height: 80px;
width: 320px;
background: red;
} <div class="container">
<div class="box">
</div>
<div class="v-div">
</div>
</div>
有几个重叠，你应该可以很好地继续！
Stack Overflow用户
发布于 2017-05-26 04:27:59
一种解决方案:之前和之后
.arrow {
font-size: 0;
}
.inner-arrow {
width:210px;
height:80px;
display: inline-block;
background-color:green;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:80px;
vertical-align: middle;
}
.arrow:before,
.arrow:after {
content:'';
display: inline-block;
width:0;
height:0;
border:40px solid transparent;
vertical-align: middle;
}
.arrow:before {
border-top-color: green;
border-bottom-color: green;
border-right-color: green;
}
.arrow:after {
border-left-color: green;
}<div class="arrow">
<div class="inner-arrow">Next step</div>
</div>
Stack Overflow用户
发布于 2017-05-26 04:56:36
您可以使用css伪元素:before和after来实现这一点。
检查下面的代码片段：
ul{
padding:0;
list-style-type: none;
border:1px solid #ccc;
}
ul:before,ul:after{
content:"";
display:table;
}
ul:after{
clear:both;
}
ul li {
display: inline-block;
width: 25%;
float: left;
text-align: center;
text-transform: uppercase;
font-size: 10px;
font-family: sans-serif;
}
ul li.active {
background: forestgreen;
color: #fff;
}
ul li a {
padding: 0 12px;
height: 40px;
line-height: 40px;
position: relative;
display: block;
}
ul li.active a:before,ul li.active a:after{
content: "";
position: absolute;
border-style: solid;
border-color: transparent transparent transparent white;
border-width: 20px;
left: 0px;
}
ul li.active a:after{
content: "";
right: -40px;
left: auto;
border-color: transparent transparent transparent forestgreen;
}
ul li.active a {
padding-left: 30px;
}<ul>
<li><a>job post</a></li>
<li class="active"><a>invite</a></li>
<li><a>review</a></li>
<li><a>hire</a></li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44189079
复制相关文章
相似问题
腾讯云开发者
