css的三角形怎么有边框的

Question

新浪微博的评论，带边的突出三角

Answer 1

做了一个类似的。利用::before来做小的三角形然后定位，边框的颜色就是大的三角形的背景色，利用小三角形去覆盖大三角形，达到要的效果。

demo地址：http://codepen.io/johnhsm/pen/waxOPN

Answer 2

改变一下这个小三角的margin，一目了然。所谓边框只是背景

Answer 3

这种问题，看源码啊！

Answer 4

这种其实你自己审差元素就可以看到，他们是通过content来做的，当然可以设置边框,给你个栗子

.cut:after {
  content: " ";
  position: absolute;
  right: 10px;
  width: 10px;
  height: 10px;
  border: #bcbec2 solid 1px;
  border-left: 0;
  border-bottom: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

Answer 5

使用元素的before和after属性，优先级after高于before，然后分别做出两个形状大小相同的小三角形，before的border-color是元素的边框颜色，after的border-color是元素的背景颜色，然后错开重叠，就能形成边框的效果。

.message-footer__tooltip {
    padding: 5px;
    border: 1px solid #e9e9e9;
    color: #afafaf;
    position: absolute;
    left: -170px;
    top: 2px;

    &:before {
      content: '';
      width: 0;
      height: 0;
      border-width:8px 0 8px 8px;
      border-style:dashed;
      border-color:transparent transparent transparent #e9e9e9;
      position: absolute;
      top: 6px;
      right: -9px;
    }

    &:after {
      content: '';
      width: 0;
      height: 0;
      border-width:8px 0 8px 8px;
      border-style:dashed;
      border-color:transparent transparent transparent #fff;
      position: absolute;
      top: 6px;
      right: -8px;
    }

  }