मैं CSS3 ग्रेडिएंट का उपयोग करके इस तरह की बनावट कैसे प्राप्त करूं?
उत्तर:
जवाब के लिए 2 № 1पहली पृष्ठभूमि का उपयोग करना आसान है repeating-linear-gradient:
body {
height:100vh;
width:100vw;
background:repeating-linear-gradient(
to bottom,
#58D68D 0,
#58D68D 30px,
#2ECC71 30px,
#2ECC71 60px
);
}दूसरी पृष्ठभूमि बहुत अधिक जटिल है और सीएसएस समाधान नहीं होना चाहिए। मैं एक का उपयोग करने की सलाह देता हूं background-image बजाय!
इसे सीएसएस के साथ हल करना असंभव नहीं है (उपयोग करके perspective):
body {
transform: perspective(100em) rotateX(50deg) scale(2);
overflow:hidden;
}
div {
height:100vh;
width:100vw;
background:repeating-linear-gradient(
to bottom,
rgba(46, 204, 113, 0.5) 0,
rgba(46, 204, 113, 0.5) 30px,
rgba(88, 214, 141, 0.5) 30px,
rgba(88, 214, 141, 0.5) 60px
), repeating-linear-gradient(
to right,
rgba(46, 204, 113, 0.5) 0,
rgba(46, 204, 113, 0.5) 30px,
rgba(88, 214, 141, 0.5) 30px,
rgba(88, 214, 141, 0.5) 60px
);
}<div></div>