logo标签列表

使用CSS创建边框箭头

htmlcss
10

我得到了一个与我合作过的设计师的草图，想知道如何在下面图片中创建边框箭头：

borderarrow

我尝试使用:after选择器来输出这个font-awesome图标，但效果很糟糕： 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>
你可以使用 "»" 或 "»"，参考 http://www.utexas.edu/learn/html/spchar.html。 - user3470953
2
请查看以下网址：http://css-tricks.com/triangle-breadcrumbs/ - Kheema Pandey
太棒了@KheemaPandey！谢谢你！ - Johan Nordli
我认为最好使用图像来绘制三角形轮廓。无论如何，这是 Fiddle。虽然我已经接近了它。 - Mr_Green
5个回答
15

通过CSS边框可以创建三角形的方法是：

border-top: 20px solid transparent; 
border-bottom: 20px solid transparent; /* 40px height (20+20) */
border-left: 20px solid green

我已经创建了与您在上面看到的相同的东西:

#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 id="container">
  <div class="arrow-right"></div>
</div>

最好使用border-left: 19px solid green; right:-19px; 在fiddle中可以给我完美的输出。无论如何+1。 - Leo T Abraham
这并不是 OP 寻找的内容。由于这是面包屑导航，最好使用 ol 而不是使用 div。 - Kheema Pandey
真的，连你的演示都不能正常工作...先检查一下再回答。 - Kheema Pandey
请检查您更新后的演示。http://jsfiddle.net/kheema/5rcL6/1/ 可能不错，但不符合要求。 - Kheema Pandey
1
这不是关于创建带边框的箭头。它只是创建一个没有边框的箭头。 - sunpietro
10

终于！！:)

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

可运行的示例

仅在Chrome中工作 :( - Mr_Green
谢谢回复！它非常好用，但不幸的是只能在基于Webkit的浏览器上使用:( - Johan Nordli
@JohanNordli 我更新了我的帖子。那实际上是Firefox中的一个错误，我现在已经修复了它。 - Mr_Green
@KingKing，是的，我之前已经这样做了。后来发现火狐浏览器中与display: table-cell和position: relative有关的一个严重的错误。建议是添加一个div包装器。我在上面的评论中提到了链接。顺便说一句，谢谢你的fiddle :) 我实际上计划避免使用line-height，因为它对于两行内容不起作用..我想没有其他办法了.. - Mr_Green
1
@Mr_Green 我认为这适合OP的情况（其中文本应在单行上）。即使您的原始演示起作用，要使其与多行一起使用需要进行许多修复，三角形大小被固定设置为16px，...当有多于1行时，三角形大小也应相应地动态更改...无论如何，支持多行是一个更复杂的问题。 - King King
显示剩余5条评论
6

您需要对HTML结构进行少量更改

  1. 在bx-pager-item元素级别上添加active类
  2. 在锚标签后面再增加1个元素。

请参考以下代码片段。

Working fiddle link: Fiddle 

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

谢谢，@JigneshThummar 这正是我在寻找的！ - Pratik Shah
2
请根据您的规格进行更改。
<style>
.menu {
    position: relative;
    background: #88b7d5;

    width:150px;
    height:60px;
}
.menu:after, .menu:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0px;
    width: 0px;
    position: absolute;
    pointer-events: none;
}

.menu:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #88b7d5;
    border-width: 30px;
    margin-top: -30px;
}
</style>

<div class="menu">
</div>
2
如果需要，这里有另一个解决方案，可以作为所需的答案，但仅当需要分离元素时才有效。使用上面的示例，背景颜色必须始终保持相同。这样它将始终在项目之间具有透明度和分隔效果。希望这能帮助到您，这篇文章真的帮助我找到了这个解决方案 :) 

.items--container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-left: 1rem;
  width: 150px;
  height: 50px;
}

.item.active .content {
  color: #FFFFFF;
}

.item.active .arrow {
  background: #d68a3a;
}

.content {
  color: #000000;
  position: absolute;
  z-index: 2;
}

.arrow {
  width: 100%;
  height: 50%;
  background: #FFFFFF;
}

.arrow.top {
  transform: skew(45deg, 0deg);
  border-left: 1px solid #d68a3a;
  border-right: 1px solid #d68a3a;
  border-top: 1px solid #d68a3a;
}

.arrow.bottom {
  transform: skew(-45deg, 0deg);
  border-left: 1px solid #d68a3a;
  border-right: 1px solid #d68a3a;
  border-bottom: 1px solid #d68a3a;
}
<div class="items--container">
  <div class='item'>
    <div class="arrow top"></div>
    <div class="content">Menu Item 1</div>
    <div class="arrow bottom"></div>
  </div>
  <div class='item'>
    <div class="arrow top"></div>
    <div class="content">Menu Item 2</div>
    <div class="arrow bottom"></div>
  </div>
  <div class='item active'>
    <div class="arrow top"></div>
    <div class="content">Menu Item 3</div>
    <div class="arrow bottom"></div>
  </div>
  <div class='item'>
    <div class="arrow top"></div>
    <div class="content">Menu Item 4</div>
    <div class="arrow bottom"></div>
  </div>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接