css好看的背景图(第三弹)

478 阅读1分钟

使用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;
}