CSS设置div四个角的样式

2020-04-03  本文已影响0人  随行者pgl
图样.png

话不多说,直接上代码

    <div class="angle-border left-top-border"></div>
        <div class="angle-border right-top-border"></div>
        <div class="angle-border left-bottom-border"></div>
        <div class="angle-border right-bottom-border"></div>
</div>

  .plate-rank-content{
    width:500px;
    height: 268px;
    box-shadow:inset 0px  0px 30px 0px rgba(32,116,247,0.3);
    border:1px solid rgba(255,255,255,0.4);
    position:relative;
  }
  .angle-border{
    position: absolute;
    width: 12px;
    height: 12px;
  }
  .left-top-border{
    top: 0;
    left: 0;
    border-left: 2px solid #FFFFFF;
    border-top: 2px solid #FFFFFF;
  }
  .right-top-border{
    top: 0;
    right: -2px;
    border-right: 2px solid #FFFFFF;
    border-top: 2px solid #FFFFFF;
  }
  .left-bottom-border{
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
  }
  .right-bottom-border{
    bottom: 0;
    right: -2px;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
  }
上一篇下一篇

猜你喜欢

热点阅读