纯CSS实现箭头,圆点, 三角形

http://my.oschina.net/u/2362038/blog/649376
箭头:
.goback {
      position: absolute;
      top: 18px;
      left: 18px;
      border: 10px solid transparent;
      border-right: 10px solid #ccc;
    }
    
    .goback:hover {
      border-right: 10px solid #808080;
    }
    
    .goback:after {
      content: '';
      position: absolute;
      top: -10px;
      left: -7px;
      border: 10px solid transparent;
      border-right: 10px solid #fff;
    }
  <div class="goback"></div>



圆点:
  .circle {
      position: absolute;
      margin: 52px 45px;
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 50%;
      border: 1px solid #2090ff;
    }
    
    .circle:after {
      content: '';
      margin: 3px;
      display: table;
      width: 6px;
      height: 6px;
      background: #2090ff;
      border-radius: 50%;
    }
<div class="circle"></div>



三角形:
.triangle {
      position: absolute;
      top: 16px;
      right: 18px;
      border: 6px solid transparent;
      border-top: 6px solid #123456;
    }
<div class="triangle"></div>

猜你喜欢

转载自panyongzheng.iteye.com/blog/2287414