CSS设置DIV的四个角样式

开发项目的时候需要给div四个角添加样式。做成科技感。如图的四个角。网上看了很多种方法,都是一个角用一张图片,不是我想要的。然后自己写了css,不用图片直接可以用颜色设置。

《CSS设置DIV的四个角样式》

html部分:

我们需要两个div,因为这两个div都是需要底色的,如图。如果你不需要底色,也可以使用一个div即可。可是这里还是建议使用一个单独的div设置角度样式css较好。

<div class="item">
  <div class="item-angle"></div>  
</div>

css部分:

这里是通过linear-gradient() 的原理。该函数用于创建一个线性渐变的 “图像”。


.item-angle{ width: 500px; height: 500px; margin: 100px; background: linear-gradient(#00faff, #00faff) left top, linear-gradient(#00faff, #00faff) left top, linear-gradient(#00faff, #00faff) right top, linear-gradient(#00faff, #00faff) right top, linear-gradient(#00faff, #00faff) left bottom, linear-gradient(#00faff, #00faff) left bottom, linear-gradient(#00faff, #00faff) right bottom, linear-gradient(#00faff, #00faff) right bottom; background-repeat: no-repeat; background-size: 2px 5px, 5px 2px; }

如果此时你再要一个四条边都有线条的。很简单加上一个border边框就可以了。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注