纯 CSS + DIV 实现带小三角div矩形

/*正方形样式*/
    #demo{
      width:96px;
      height: 96px;
      border:2px solid #0cc;
      background-color: #fff;
      position:absolute;
     }
  /*小三角形*/
  #demo:before,#demo:after{
    width: 0;
    height: 0;
    border: solid transparent;
    position: absolute;
    left: 100%;
    /*该属性一定要有*/
    content:'';
  }
  #demo:before{
    border-width: 10px;
    border-left-color: #0cc;
    top:20px;
  }
  #demo:after{
      border-width: 8px;
      border-left-color: #fff;
      top:22px;

  }

HTML：代码

<div id='demo'></div>
————————————————
版权声明：本文为CSDN博主「guoxiaxing」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hahahahahahahaha__1/article/details/80548857