在我的彩色div的左侧有一个箭头

Question

假设我有以下矩形框（这是一个div），我想在左侧表示一个箭头。我正在寻找一种非常简单的方法，但我发现的每一个解决方案对我来说都有点棘手。

<div class="redbox">
    <b>Hello world</b>
</div>

 .redbox {
   display: inline-block;
    padding: 5px;
   background-color: red;
} 

http://jsfiddle.net/3N6yP/

如何转换此简单div以在左侧显示箭头？

喜欢它的东西：

Answer 1

这里使用了一个CSS三角形，它位于元素absolute之外，而且使用:before伪，因此它会为你创建虚拟元素。这只会在DOM中保存几个字符。只需确保对具有类position: relative;的元素使用.redbox，以便absolute定位的虚拟元素不会在野外飞走。

Demo

.redbox:before {
    content: "";
    position: absolute;
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right:15px solid #f00; 
    top: 0;
    left: -15px;
}

Answer 2

您可以使用此跨浏览器生成器：http://cssarrowplease.com/

Answer 3

我发现“边界技巧”有时会在不同的浏览器中出现不可预测的边距偏移（当然，这取决于你的标记）并且更喜欢其他方法。

我个人使用经过验证的方法并使用图像。根据您的情况，您可以只有一个精灵图像，或者您可以包装箭头和内容。

http://jsfiddle.net/3N6yP/5/

HTML：

<div class="redbox">
    <span></span><div>Hello World</div>
</div>

CSS：

.redbox {
   display: inline-block;
    padding: 5px;
   background-color: red;

}
.redbox div{
    height:30px;
    background:#ff0000;
    display:inline-block;
    line-height:30px;
}

.redbox span{
    float:left;
    display:block;
    height:30px;
    width:20px;
     background:#333333 url(http://i.stack.imgur.com/cUsjz.png) center left no-repeat;
}