用css创建边框箭头
所以我得到了一位与我合作过的设计师的素描,并想知道如何在下面的图片中创建边框箭头
我试图通过使用:after选择器推出这个字体真棒图标 ,它非常难看:http: //fortawesome.github.io/Font-Awesome/icon/angle-right/
所以相反,我试图通过这个箭头生成器在箭头上放一个箭头:http: //apps.eky.hk/css-triangle-generator/
它也变得非常难看.所以现在我想知道是否有人对如何解决这个问题有好主意？
到目前为止我的HTML看起来如何:
<div class="bx-pager bx-default-pager">
<div class="bx-pager-item">
<a class="bx-pager-link active" data-slide-index="0" href=""> 1. DIN EXPERT </a>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="1" href=""> 2. VÅRA TJÄNSTER </a>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="2" href=""> 3. CASE </a>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="3" href=""> 4. KONTAKT </a>
</div>
</div>
您可以通过以下方式创建CSS边框的三角形
border-top: 20px solid transparent;
border-bottom: 20px solid transparent; /* 40px height (20+20) */
border-left: 20px solid green
我创建了与你在上面看到的相同的东西:
HTML:
<div id="container">
<div class="arrow-right"></div>
</div>
CSS:
#container {
width:150px;
height:40px;
background-color:green;
position:relative;
}
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent; /* 40px height (20+20) */
border-left: 20px solid green;
position:absolute;
right:-20px;
}
产量
最后!!:)
div.main {
margin-right:30px;
}
ol > li {
display: table-cell;
height: 30px;
position: relative;
padding: 0px;
margin: 0px;
text-align: center;
border: 1px solid #d68a3a;
}
ol > li > div {
position:relative;
line-height: 30px; /* equal to the list item's height */
height:100%;
width: 100%;
}
ol>li:hover {
background-color: #d68a3a;
cursor: pointer;
color: white;
}
ol {
display: table;
width: 100%;
padding: 0px;
margin: 0px;
position: relative;
}
ol > li > div:after, ol > li > div:before {
content:"";
display:inline-block;
border-width: 16px;
border-style: solid;
width: 0px;
height: 0px;
left: 100%;
top: -1px;
position: absolute;
z-index: 1;
}
ol > li > div:after, ol > li:hover > div:before {
border-color: transparent transparent transparent #d68a3a;
}
ol > li > div:before {
border-width: 14px;
display: block;
border-color: transparent transparent transparent #ffffff;
z-index: 2;
top:1px;
}
小智 5
您必须对 html 结构进行一些更改
- 将活动类置于 bx-pager-item 元素级别
- 在锚标记之后放置 1 个额外元素。
请参考下面的代码片段。
工作小提琴链接：小提琴
.container {
max-width: 700px;
margin: auto;
}
.bx-pager {
display: flex;
align-items: center;
height: 34px;
border-left: 1px solid #d68a3a;
}
.bx-pager .bx-pager-item {
display: flex;
align-items: center;
height: 100%;
flex: 0 25%;
border-top: 1px solid #d68a3a;
border-bottom: 1px solid #d68a3a;
}
.bx-pager .bx-pager-item .bx-pager-link {
text-decoration: none;
color: #222;
font-size: 13px;
flex: 1;
padding-left: 16px;
text-align: center;
}
.bx-pager .bx-pager-item .arrow {
border: solid #d68a3a;
display: inline-block;
padding: 9px;
border-width: 0 1px 1px 0;
transform: translateY(15.5px) rotate(-45deg) skew(-15deg, -15deg) translateX(18px);
background-color: #FFF;
}
.bx-pager .bx-pager-item.active {
background-color: #d68a3a;
}
.bx-pager .bx-pager-item.active .bx-pager-link {
color: white;
}
.bx-pager .bx-pager-item.active .arrow {
background-color: #d68a3a;
}<body>
<div class="container">
<div class="bx-pager bx-default-pager">
<div class="bx-pager-item active">
<a class="bx-pager-link " data-slide-index="0" href=""> 1. DIN EXPERT </a>
<div class="arrow">
</div>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="1" href=""> 2. VÅRA TJÄNSTER </a>
<div class="arrow">
</div>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="2" href=""> 3. CASE </a>
<div class="arrow">
</div>
</div>
<div class="bx-pager-item">
<a class="bx-pager-link" data-slide-index="3" href=""> 4. KONTAKT </a>
<div class="arrow">
</div>
</div>
</div>
</div>
</body>