首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在HTML/CSS/JS中创建箭头条

在HTML/CSS/JS中创建箭头条
EN

Stack Overflow用户
提问于 2017-05-26 04:13:36
回答 3查看 2.8K关注 0票数 1

我正在尝试创建一个进度箭头栏,它看起来类似于上图。我从一组列(四列-sm-4)开始,不知道从哪里开始。

EN

回答 3

Stack Overflow用户

发布于 2017-05-26 04:20:01

我用你想要的形状做了一个(受this post启发的) div:

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
    <div class="container">
      <div class="box">
      </div>
        <div class="v-div">
        </div>
    </div>

有几个重叠,你应该可以很好地继续!

票数 3
EN

Stack Overflow用户

发布于 2017-05-26 04:27:59

一种解决方案:之前和之后

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<div class="arrow">
    <div class="inner-arrow">Next step</div>
</div>

票数 2
EN

Stack Overflow用户

发布于 2017-05-26 04:56:36

您可以使用css伪元素:beforeafter来实现这一点。

检查下面的代码片段:

代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44189079

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档