文章/答案/技术大牛

发布

社区首页 >问答首页 >使用css创建箭头

问使用css创建箭头
EN

Stack Overflow用户

提问于 2016-11-07 14:53:58

回答 3查看 2K关注 0票数 1

有没有办法在下面的按钮中使用CSS创建这样的箭头？

我知道如何创建这样的三角形箭头。

#triangle_arrow {
        top: 3pt;
        content: "";
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-right: 0.1em solid black;
        border-top: 0.1em solid black;
        transform: rotate(45deg);
    }

但箭角的那条线把我弄糊涂了！

css

css-shapes

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-11-07 15:19:58

已经有方法可以实现这一点，如James所建议的，但您甚至可以使用pseudo selectors或使用font awesome预定义的图标获取某个标记旁边的箭头图标，如下所示。

解决方案1:

#box{
  width:100px;
  height:50px;
  background:blue;
  position:relative;
}    
#box:before{
        top: 20px;
        right:10px;
        content: "";
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-right: 0.1em solid white;
        border-top: 0.1em solid white;
        transform: rotate(45deg);
        position:absolute;
}
#box > p:after{
  content:'';
  width:20px;
  height:1px;
  background:white;
  right:10px;
  top:24px;
  position:absolute;
}
#box > p{
  font-size:24px;
  color:#fff;
  padding:10px;
  box-sizing:border-box;
}

<div id="box">
<p>Next</p>
</div>

解决方案2 :

#box{
  width:100px;
  height:50px;
  background:blue;
  position:relative;
}    
#box > p{
  font-size:24px;
  color:#fff;
  padding:10px;
  box-sizing:border-box;
}
#box > p > .fa{
  color:#fff;
  font-size:16px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="box">
<p>Next <i class="fa fa-arrow-right"></i></p>
</div>

票数 1

Stack Overflow用户

发布于 2016-11-07 14:58:12

幸运的是，CSS HTML实体存在，这意味着您不需要使用CSS三角形，而只需在伪元素中使用content：

button {
  background: #0898b8;
  border: 1px solid #0898b8;
  color: white;
  line-height: 24px;
  padding: 6px 12px;
}

span::after {
  content: '→';
  font-size: 18px;
  margin-left: 4px;
}

<button>
  <span>Next</span>
</button>

票数 3

Stack Overflow用户

发布于 2019-06-13 17:07:24

可调整CSS大小的箭头。https://codepen.io/ArtZ91/pen/jjbOvG

<div class="css-arrow top" style="width: 15px; height: 30px; zoom: 2;"></div>

.css-arrow {
  position: relative;
  zoom: 1;
  &:before {
      box-sizing: border-box;
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      top: 1px;
      bottom: 0;
      width: 1px;
      background: #000;
      zoom: 2;
  }
  &:after {
    box-sizing: content-box;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 57%;
    height: 0;
    padding-bottom: 57%;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    transform: translate(0, 0) rotate(45deg);
    transform-origin: 0% 0%;
    border-radius: 0;
    zoom: 2;
  }
  &.right {
    transform: rotate(90deg);
  }
  &.bottom {
    transform: rotate(180deg);
  }
  &.left {
    transform: rotate(270deg);
  }
}

票数 0

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

原文链接：

https://stackoverflow.com/questions/40468111

复制

相似问题

问使用css创建箭头
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用css创建箭头EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用css创建箭头
EN