div怎么用css写角

div怎么用css写角

一、使用linear-gradient线性渐变来实现

1、添加一个div元素，给它一个类名rect

2、使用background属性，设置为linear-gradient实现四个角。

.rect {
    position: absolute; 
    top: 20px;
    left: 20px; 
    width: 100px; 
    height: 100px; 
    background: linear-gradient(to left, #f00, #f00) left top no-repeat, 
                linear-gradient(to bottom, #f00, #f00) left top no-repeat, 
                linear-gradient(to left, #f00, #f00) right top no-repeat,
                linear-gradient(to bottom, #f00, #f00) right top no-repeat, 
                linear-gradient(to left, #f00, #f00) left bottom no-repeat,
                linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat,
                linear-gradient(to left, #f00, #f00) right bottom no-repeat;
    background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;  
}

<div class="rect"></div>

效果：

二、使用四个空div来实现

<div class="plate-rank-content">
	<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>

  body{
    background: #8a8a8a;
  }
  .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;
  }

效果：