一個角度的線性漸變

Question

我正在嘗試使用線性背景漸變創建白光“光束”，如下圖所示：

漸變的角度需要為 100 度。 我試圖通過 jsfiddle = https://jsfiddle.net/gqn8tv69/創建這個

CSS：

.skeleton-9r7r1v3dh92:empty {box-sizing: content-box; height: 400px; background-color: #000000; border-radius: 0px 0px 0px 0px; background-image: linear-gradient( 100deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.5) 20%, rgba(255,255,255, 0.5) 80%, rgba(255,255,255, 0) 20%, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0) 0% );background-repeat: repeat-y;background-size: 100px 400px;background-position: 50% 0}

但是我嘗試任何一方的一切都有戲劇性的削減。 關於如何處理這個問題的任何想法？

Answer 1

試試這樣：

 .box { background:linear-gradient(100deg,#000 42%,#fff 48% 52%,#000 58%); height:300px; }

 <div class="box"></div>

或者像下面這樣的固定尺寸：

 .box { background:linear-gradient(100deg,#000 calc(50% - 50px),#fff,#000 calc(50% + 50px)); height:300px; }

 <div class="box"></div>

Answer 2

我使用Colorzilla 漸變編輯器做了這個“光束”，您可以調整百分比或使用漸變的永久鏈接：

 .gradient { height: 100vh; width: 100vw; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0a0809+0,0a0e0a+44,ffffff+49,000000+53,000000+100 */ background: #0a0809; /* Old browsers */ background: -moz-linear-gradient(-45deg, #0a0809 0%, #0a0e0a 44%, #ffffff 49%, #000000 53%, #000000 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #0a0809 0%,#0a0e0a 44%,#ffffff 49%,#000000 53%,#000000 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #0a0809 0%,#0a0e0a 44%,#ffffff 49%,#000000 53%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a0809', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }

 <div class="gradient"></div>