利用线性梯度在CSS3中实现三角形背景的交替变换
利用线性梯度在CSS3中实现三角形背景的交替变换
提问于 2017-07-03 23:51:00
我创建了以下背景模式：
https://codepen.io/anon/pen/JJvbjz
CSS：
body {
background:
linear-gradient(-120deg, transparent 63%, #fff 63%),
linear-gradient(120deg, transparent 63%, #fff 63%),
linear-gradient(to bottom, blue, blue);
background-size: 90px 50px;
background-repeat: repeat-x;
}我希望能够改变三角形的颜色，例如红、蓝、绿、红、蓝、绿、红、蓝、绿等。
这个是可能的吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-04 02:21:17
我保留了你的原始设计作为参考。
在编辑过的设计中，我有：
将背景大小设置为原始大小的两倍
改变了生成三角形的方式，这样你只需要2个元素而不是3个。
并向第三和第四张背景图像添加了一个非0位置，以使它们看起来与第一个2交错
.test {
width: 100%;
height: 100px;
background:
linear-gradient(-120deg, transparent 63%, #fff 63%),
linear-gradient(120deg, transparent 63%, #fff 63%),
linear-gradient(to bottom, blue, blue);
background-size: 90px 50px;
background-repeat: repeat-x;
}
.test2 {
width: 100%;
height: 60px;
background-size: 180px 60px;
background-repeat: repeat-x;
background-image: linear-gradient(120deg, blue 26px, transparent 28px),
linear-gradient(-120deg, blue 26px, transparent 28px),
linear-gradient(120deg, red 26px, transparent 28px),
linear-gradient(-120deg, red 26px, transparent 28px);
background-position: 0px 0px, 0px 0px, 90px 0px, 90px 0px;
}<div class="test"></div>
<div class="test2"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44889730
复制相关文章
相似问题
腾讯云开发者
