【CSS】红砖背景

7275569-c638543196ffef9f.png
image.png

CSS代码:

* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
}
body {
    background-color: white;
    background-image: 
        linear-gradient(335deg, #b00 23px, transparent 0),
        linear-gradient(155deg, #d00 23px, transparent 0),
        linear-gradient(335deg, #b00 23px, transparent 0),
        linear-gradient(155deg, #d00 23px, transparent 0);
    background-position: 0px 0px, 4px 33px, 30px 29px, 34px 4px;
    background-size: 58px 58px;
}

感谢Lea Verou免费分享上图效果,我在她的CSS库里面找到这个效果的代码,然后自己改良了一下。

下面详细分析。

如果看得懂【CSS】格仔背景 的话,理解这次这种效果就会更容易了。

主要是通过两个不同颜色的三角形,合成一个长方形。再通过做2层这种长方形,调整好相应的位置,就形成以上效果。

7275569-689a07baf60fab50.png
image.png

画2个不同颜色的三角形,把下面三角形分别往上和往左移动一点点。

  background-image: 
        linear-gradient(335deg, #b00 23px, transparent 0),
        linear-gradient(155deg, #d00 23px, transparent 0),
    background-position: 0px 0px, 4px 33px;
    background-size: 58px 58px;
}

这时会得到下图的效果

7275569-6915b3b4969f97d4.png
image.png

会看到行距比较大。所以需要再画一层同样的红砖,调整“新红砖层”的位置。

 background-image: 
        linear-gradient(335deg, #b00 23px, transparent 0),
        linear-gradient(155deg, #d00 23px, transparent 0),
        <!-- 新层 -->
        linear-gradient(335deg, #b00 23px, transparent 0),
        linear-gradient(155deg, #d00 23px, transparent 0);
    
    <!-- 最后的 30px 29px, 34px 4px 是对新层的定位>
    background-position: 0px 0px, 4px 33px, 30px 29px, 34px 4px;
    background-size: 58px 58px;
7275569-2211fa5a16faabae.png
image.png





其他相关内容
【CSS】渐变背景(background-image)
【CSS】同色系背景
【CSS】网格背景
【CSS】波点背景
【CSS】格子背景





希望以上笔记对大家有帮助。
我的其他笔记在微信公众号:Rabbit_svip
7275569-ed8423e046737039.png
image.png

乐播投屏是一款简单好用、功能强大的专业投屏软件,支持手机投屏电视、手机投电脑、电脑投电视等多种投屏方式。 多端兼容与跨网投屏:支持手机、平板、电脑等多种设备之间的自由组合投屏,且无需连接 WiFi,通过跨屏技术打破网络限制,扫一扫即可投屏。 广泛的应用支持:支持 10000+APP 投屏,包括综合视频、网盘与浏览器、美韩剧、斗鱼、虎牙等直播平台,还能将央视、湖南卫视等各大卫视的直播内容一键投屏。 高清流畅投屏体验:腾讯独家智能音画调校技术,支持 4K 高清画质、240Hz 超高帧率,低延迟不卡顿,能为用户提供更高清、流畅的视觉享受。 会议办公功能强大:拥有全球唯一的 “超级投屏空间”,扫码即投,无需安装。支持多人共享投屏、远程协作批注,PPT、Excel、视频等文件都能流畅展示,还具备企业级安全加密,保障会议资料不泄露。 多人互动功能:支持多人投屏,邀请好友加入投屏互动,远程也可加入。同时具备一屏多显、语音互动功能,支持多人连麦,实时语音交流。 文件支持全面:支持 PPT、PDF、Word、Excel 等办公文件,以及视频、图片等多种类型文件的投屏,还支持网盘直投,无需下载和转格式。 特色功能丰富:投屏时可同步录制投屏画面,部分版本还支持通过触控屏或电视端外接鼠标反控电脑,以及在投屏过程中用画笔实时标注等功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值