用css创建边框箭头

Posted 2023-03-06

【中文标题】用css创建边框箭头

【英文标题】：Create border arrow with css

【发布时间】：2014-06-19 03:31:06

【问题描述】：

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

我尝试使用 :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>

【问题讨论】：

你可以使用“»”或“»”看utexas.edu/learn/html/spchar.html

检查此网址。 css-tricks.com/triangle-breadcrumbs

真棒@KheemaPandey！谢谢！

我认为三角形轮廓最好使用图像。无论如何，这是Fiddle。不过，我可以走得这么近..

【参考方案1】：

您可以通过以下方式创建带有 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 纯绿色;right:-19px;它给了我完美的小提琴输出。无论如何+1

这并不是 OP 正在寻找的。由于这是一个面包屑，所以最好使用ol 而不是使用div。

真的，连你的Demo都不能正常工作..先检查再给出答案。

检查您更新的演示。 jsfiddle.net/kheema/5rcL6/1 可能不错，但不符合要求。

这不是创建一个带边框的箭头。它只是创建一个没有边框的箭头。

【参考方案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>

【参考方案3】：

最后！！ :)

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

【讨论】：

可能存在箭头调整问题，您可以通过将值更改为left、margin-right 和border-width 来解决此问题。

仅在 Chrome 中工作 :(

感谢您的回复！它工作得非常好，但不幸的是只在基于 webkit 的浏览器上：(

@JohanNordli 更新了我的帖子。那实际上是bug in firefox。我现在修好了。

@Mr_Green 我认为它适合 OP 的情况（其中文本应该在单行上）。即使您的原始演示有效，要使其与 multiline 一起使用也需要许多修复，三角形大小固定设置为16px，...当有超过 1 条线时，三角形大小应该也可以相应地动态改变……不管怎样，支持多行是一个更复杂的问题。

【参考方案4】：

你必须对你的 html 结构做一些小改动

将活动类放在 bx-pager-item 元素级别 在锚标记后添加 1 个额外元素。

请参考下面的代码sn-p。

工作小提琴链接：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 这正是我想要的！

【参考方案5】：

如果其他人需要它，这里是另一种解决方案，它可以作为请求的答案，但如果需要分离元素，它将起作用。

使用上面的示例，将会发生的情况是背景必须始终保持相同的颜色。像这样，它总是有一个分隔，因此项目之间的透明度。

希望这会有所帮助，这篇文章真的帮助我找到了这个解决方案:)

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