用纯CSS实现一个带三角的正方形 仅用一个div


要求:正方形边长100px,背景颜色白色,边框颜色#0cc,三角形为等腰直角三角形底20px,高10px,距正方形上部20px,

边框宽度为2px。

CSS样式:

/*正方形样式*/
    #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>

展开阅读全文

没有更多推荐了,返回首页