边框的四个角

作者: 思念LY | 来源:发表于2020-03-11 15:02 被阅读0次

2018-04-21 记录一些用到的CSS样式【留下了不学无术的
边框的四个角
2021-11-07 边框图片
边框相关样式
边框圆角
css画气球
结构草图
简笔画学习素材
CSS三角的做法
缺角边框

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>