一, 使用 linear-gradient 线性渐变来实现
1, 添加一个 div 元素, 给它一个类名 rect
2, 使用 background 属性, 设置为 linear-gradient 实现四个角.
- (相关课程推荐: CSS 视频教程 https://www.html.cn/css/video/ )
- .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;
- }
效果:
本文来自 CSS 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/14243.html