html - 将 div 的右侧设为箭头

Question

我在页面上有一个简单的 div:

<div>Some Text</div>

是否可以使用 CSS 使其作为箭头完成。像这样的东西:

更新

这是我使用 web-tiki 提出的解决方案看到的结果:

看到箭头上的切口了吗？

谢谢你， 米格尔

Answer 1

---

编辑: 如果你需要箭头适应文本的高度(考虑到它可以显示在多行)你可以使用 linear-gradient箭头的背景。

FIDDLE

---

这可以做到:

FIDDLE

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