如何使用CSS制作X線性漸變效果？

Question

我試圖使用CSS linear-gradient （實際上是背景全角橫幅）制作類似（下圖）的圖片，但是我似乎無法弄清楚度數。 有人可以幫忙嗎？

CSS和HTML

 #back { padding: 200px 0; color: black; background: linear-gradient(120deg, red 25%, transparent 30%), linear-gradient(60deg, yellow 25%, transparent 30%), linear-gradient(-60deg, blue 10%, transparent 30%), linear-gradient(240deg, green 25%, transparent 0%); } 

 <section id="back"> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dictum velit. Sed nec enim leo. Quisque nec urna ex. Vestibulum ut aliquet ante, non consectetur nunc. Nunc ac consequat nisl. Etiam vitae scelerisque nisi. Vivamus ipsum ipsum, tincidunt at augue dapibus, tincidunt aliquet ligula. Curabitur id neque porttitor, sodales velit eget, cursus mi.</h3> </section> 

您的任何答復將不勝感激。

Answer 1

您可以使用linear-gradient和background-size 。

您需要將各個部分放在一起。 一種顏色可以是單一background-color ：

您最終需要繪制一個任意大小的正方形

  #back, .back { display: inline-block; margin: 1em; vertical-align: middle; padding: 100px; border: solid; height: 0; width: 0; color: black; background: /* red */ linear-gradient(45deg, red 50%, transparent 50.1%) 0 0 no-repeat, linear-gradient(135deg, red 50%, transparent 51%) 0 100% no-repeat, /*yellow */ linear-gradient(135deg, yellow 50%, transparent 50.1%) 100% 0% no-repeat, linear-gradient(225deg, yellow 50%, transparent 51%) 0 0 no-repeat, /* blue */ linear-gradient(225deg, blue 50%, transparent 50.1%) 100% 100% no-repeat, linear-gradient(-45deg, blue 50%, transparent 50.1%) 100% 0% no-repeat /* green */ green; background-size: 50% 50% } .back { padding: 0; height: 50px; width: 50px; display: inline-flex; align-items: center; justify-content: center; } 

 <div id="back"></div> <div class="back">test</div> 

從下面的評論中可以看出，方向是一種比敏捷更好的方法。

 #back { padding: 200px 0; color: black; color: black; background: /* red */ linear-gradient(to top right, red 50%, transparent 50.1%) 0 0 no-repeat, linear-gradient(to bottom right, red 50%, transparent 51%) 0 100% no-repeat, /*yellow */ linear-gradient(to bottom right, yellow 50%, transparent 50.1%) 100% 0% no-repeat, linear-gradient(to bottom left, yellow 50%, transparent 51%) 0 0 no-repeat, /* blue */ linear-gradient(to bottom left, blue 50%, transparent 50.1%) 100% 100% no-repeat, linear-gradient(to top left, blue 50%, transparent 50.1%) 100% 0% no-repeat /* green */ green; background-size: 50% 50%; text-align: center; } 

 <div id="back"> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec dictum velit. Sed nec enim leo. Quisque nec urna ex. Vestibulum ut aliquet ante, non consectetur nunc. Nunc ac consequat nisl. Etiam vitae scelerisque nisi. Vivamus ipsum ipsum, tincidunt at augue dapibus, tincidunt aliquet ligula. Curabitur id neque porttitor, sodales velit eget, cursus mi.</h3> </div>