用css创建边框箭头 [英] Create border arrow with css

问题描述

所以我有一个设计师的草图，并且想知道如何在下面的图片中创建边框箭头。

So I got a sketch of a designer I worked with and was wondering how I create the border arrows in the picture below

我试图用这个字体真棒图标使用 ：之后选择器，它变得很丑陋：
http://fortawesome.github.io/Font-Awesome/icon/angle-right/

I tried to put out this font-awesome icon by using the :after selector, it got pretty ugly: http://fortawesome.github.io/Font-Awesome/icon/angle-right/

因此，我试图在一个箭头通过此箭头发生器：
http://apps.eky.hk/css -triangle-generator /

So instead, I tried to put an arrow on an arrow through this arrow generator: http://apps.eky.hk/css-triangle-generator/

它也变得非常丑陋。所以现在我想知道是否有任何人对如何解决这个问题有一个好主意。

It also became very ugly. So now I wonder if there is anyone who has a good idea on how to solve this?

到目前为止我的html看起来像是什么：

How my html look like so far:

<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>

推荐答案

Atlast！ ：）

Atlast!! :)

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;
}

工作小提琴

Working Fiddle

这篇关于用css创建边框箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！