1. 程式人生 > >CSS偽類製作三角形

CSS偽類製作三角形

 .content{
    width: 300px;
    height: 50px;
    position: relative;  //創建出來的小三角偽類要以它來定位
    .content:after{
      content:"";
      position: absolute;
      left: 150px;
      bottom: -10px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 10px 0 10px;  // 上、右、下、左  三角朝哪個方向,哪個方向的寬度為0
      border-color: red transparent transparent transparent;  //上、右、下、左   三角朝哪個方向,該方向相對的方向有顏色
    }
  }