边框的四个角

1.png

引入fa 字体库，通过选择四个箭头图标实现四个角的效果，都是字体，大小样式可调节,不用图片加载快，循环起来无压力

    <!DOCTYPE html>
    <html>

    <head>
      <title>边框的四个角</title>
    </head>

    <body>
      <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
      <div class="item">
        <div class="name"><span>我是中心点</span></div>
        <i class="fa fa-angle-down item-up"></i>
        <i class="fa fa-angle-down item-down"></i>
        <i class="fa fa-angle-down item-up1"></i>
        <i class="fa fa-angle-down item-down1"></i>
      </div>
    </body>

    </html>
    <style type="text/css">
    body {
      background: #000;
    }

    .item {
      width: 100px;
      height: 100px;
      position: relative;
      color: #fff;
      background: #0d1c87;
    }

    .name {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .item-up {
      position: absolute;
      left: -3px;
      top: -5px;
      color: #ff0;
      transform: rotate(135deg);
      font-size: 16px;
    }

    .item-down {
      position: absolute;
      left: -3px;
      bottom: -5px;
      color: #ff0;
      transform: rotate(45deg);
      font-size: 16px;
    }

    .item-up1 {
      position: absolute;
      right: -3px;
      top: -6px;
      color: #ff0;
      transform: rotate(225deg);
      font-size: 16px;
    }

    .item-down1 {
      position: absolute;
      right: -4px;
      bottom: -5px;
      color: #ff0;
      transform: rotate(-45deg);
      font-size: 16px;
    }
    </style>

边框的四个角

推荐阅读更多精彩内容