css好看的背景图（第三弹）

最新推荐文章于 2024-05-07 19:57:33 发布

繁星召唤

最新推荐文章于 2024-05-07 19:57:33 发布

阅读量990

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_42582523/article/details/121776709

版权

使用css3线性渐变实现五角星背景图

效果图：

html：

<div></div>

css：

*{
    margin: 0;
    padding: 0;
}
div{
    width: 100%;
    height: 100vh;
    background:
    linear-gradient(324deg, #232927 4%,   transparent 4%) -70px 43px,
    linear-gradient( 36deg, #232927 4%,   transparent 4%) 30px 43px,
    linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
    linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
    linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
    linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,

    linear-gradient(324deg, #232927 4%,   transparent 4%) -20px 93px,
    linear-gradient( 36deg, #232927 4%,   transparent 4%) 80px 93px,
    linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
    linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
    linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
    linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
    background-color: #232927;
    background-size: 100px 100px;
}