html - 使用 CSS 制作箭头

我正在尝试制作类似水平标签的东西:
但是有一个条件， 应该是一个唯一的 div 。可能使用 Canvas 是可能的，但是我更喜欢 css。

#msg {
   border-bottom: 10px solid transparent;
    border-right: 10px solid red;
    border-top: 10px solid transparent;
    height: 0;
    width: 100px;
   background-color: rgba(0,0,0,.8);     margin-left:20px;
}

demo

最佳答案

您可以通过一些边框技巧、定位和 :before 伪元素来实现这一点。 http://jsfiddle.net/VQcyD/

#msg {
    width:100px;
    height:40px;
    background:red;
    margin-left:40px;
    position:relative;

}
#msg:before {
    content:"";
    position:absolute;
    border-bottom: 20px solid transparent;
    border-right: 20px solid red;
    border-top: 20px solid transparent;
    height: 0px;
    width: 0px;
    margin-left:-20px;
}

关于html - 使用 CSS 制作箭头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8059184/