带有底部箭头的直线 - 仅限CSS？

Question

是否有可能在CSS中完成这样的事情（直线＆＃34;切割＆＃34;左边有一个箭头/三角形30像素）？ （这是使用adobe烟花，但想在我的网站上尽可能地摆脱图像）。

以下是我尝试过的成功案例：http://jsfiddle.net/U8AF6/

非常感谢

CSS

body {
background: red;
}

.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 1px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: red;
    border-width: 16px;
    margin-left: -16px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #c2e1f5;
    border-width: 22px;
    margin-left: -22px;
}

Answer 1

您可以使用伪元素。 请参阅Nicolas Gallagher的实验了解更多：http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

基本代码是：

.triangle:before,
.triangle:after {
  content: "";
  position: absolute;
  bottom: -15px; /* value = - border-top-width - border-bottom-width */
  left: 30px;
  border-width: 15px 15px 0; /* vary these values to change the angle of the vertex */
  border-style: solid;
  border-color: #aaa transparent;
}

.triangle:after {
  bottom: -14px; /* -1px of first element for border */
  border-color: #fff transparent;
}

请参阅此处的实施：http://dabblet.com/gist/11146863 这仅适用于稳固的背景。

Answer 2

可能有一些css3转换（我考虑的方式＆＃34;脏＆＃34;）如果你想支持旧的浏览器，css3是不可能的

这里：Fiddle

.bottom-line{
    border-bottom:1px solid #999;
}

.bottom-line:after{
    content:"";
    display:block;
    margin-bottom:-8px;
    border-right:1px solid #999;
    border-bottom:1px solid #999;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);   
    width:12px;
    height:12px;
    background-color:#fff;
    z-index:200px;
    margin-left:100px;
}

还要查看@ drublic的答案。

如果你需要支持旧的浏览器（pre ie9），你的另一个选择就是创建一个小的向下箭头图片，将它放在一些1px的边框之后，给图像一个-1px的边距，使它与边框重叠。