将div的右侧设置为箭头
将div的右侧设置为箭头
提问于 2014-04-16 19:48:25
我在页面上有一个简单的div：
<div>Some Text</div>有没有可能，使用CSS，让它以箭头的形式结束。类似于：
更新
这是我在web-tiki提议的解决方案中看到的结果：
看到箭头上的刀口了吗？
谢谢你，米格尔
回答 7
Stack Overflow用户
发布于 2014-04-16 19:58:09
编辑:如果您需要箭头适应文本的高度(考虑到它可以显示在多行上)，您可以使用箭头的linear-gradient背景。
这可以使它：
CSS：
div{
height:40px;
background:red;
color:#fff;
position:relative;
width:200px;
text-align:center;
line-height:40px;
}
div:after{
content:"";
position:absolute;
height:0;
width:0;
left:100%;
top:0;
border:20px solid transparent;
border-left: 20px solid red;
}Stack Overflow用户
发布于 2014-04-16 20:36:58
检查此
HTML
<div class="text">Some Text<span class="arrow"></span>
</div>CSS
.text {
background-color:#ff0000;
color:#fff;
display:inline-block;
padding-left:4px;
}
.arrow {
border-style: dashed;
border-color: transparent;
border-width: 0.20em;
display: -moz-inline-box;
display: inline-block; /* Use font-size to control the size of the arrow. */
font-size: 100px;
height: 0;
line-height: 0;
position: relative;
vertical-align: middle;
width: 0;
background-color:#fff; /* change background color acc to bg color */
border-left-width: 0.2em;
border-left-style: solid;
border-left-color: #ff0000;
left:0.25em;
}Stack Overflow用户
发布于 2014-04-16 20:59:06
也许超出了你的需要，但是存在一个解决方案，如中所述，它允许获得带有箭头形状的盒子，每个盒子里粘一个。
它非常适合于面包屑导航，并使用另一种方法而不是简单的borders来获得所需的结果。更详细地说，使用的一些CSS属性如下：
- Generated content (support since )
- Box (support since IE9)
- 2D (support since IE9)
shadow
由于浏览器支持这些特定的属性，因此此解决方案将在IE9 (而不是IE8)中正常工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23108550
复制相关文章
相似问题