css3带边框小三角

CSS3是为网页设计师们提供了更多的生动形象！其中，具有带边框小三角的CSS3也是眼花缭乱！

  div{
      width: 100px;
      height: 100px;
      border: 1px solid gray;
      border-right: none;
      border-bottom: none;
      position: relative;
      overflow: hidden;
  }
  div::after{
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-right-color: gray;
      border-bottom-color: gray;
      right: -20px;
      bottom: -20px;
  }

在上述代码中，我们首先把div的右边和底部边框去掉。接着，在伪元素::after中，我们设置了一个内容为空的可选元素，给它设置绝对定位，设置边框和背景颜色，最后将它位移距离具体到右下角。

当然，在CSS3的世界里还有很多形状的边框可供选择，如：圆形边框、五角星边框等等，它们可以为你的网页带来不一样的味道！