有角度的CSS分隔符

Question

請看下面的圖片......

---

我想通過CSS制作這個。

我現在使用這個分隔符作為在我的容器內響應的圖像（jpg）。 問題是我似乎無法准確匹配顏色或使白色晶體清晰銳利。

我認為CSS是解決這個問題的最佳方法。

尺寸為1170px x 100px

使用Bootstrap 3.2

<div class="container">
  <div class="row">
    <img class="img-responsive" src="img/separator.gif">
  </div>
</div>

Answer 1

解決方案1：與vw單位的邊界：

DEMO （ 哈利為演示提供的信用）

 .separator{ width:95vw; margin:0 auto; } .separator:before, .separator:after{ content:''; display:block; } .separator:before{ border-left: 95vw solid #DA7317; border-bottom: 60px solid transparent; border-right:0; border-top:0; } .separator:after{ border-right: 95vw solid #000; border-top: 50px solid transparent; border-left:0; border-bottom:0; margin-top:-45px; } 

 <div class="separator"> </div> 

解決方案2：使用變換旋轉：

DEMO

 .separator{ position:relative; padding-bottom:5.5%; overflow:hidden; } .separator:before, .separator:after{ content:''; position:absolute; -webkit-backface-visibility:hidden; } .separator:before{ background: #DA7317; bottom:100%; left:-1%; width:101%; height:200%; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .separator:after{ background: #000; top:100%; width:100%; height:100%; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-2.5deg); -ms-transform: rotate(-2.5deg); transform: rotate(-2.5deg); } 

 <div class="separator"></div> 

Answer 2

使用SVG： ^推薦

您可以使用SVG來創建形狀。 由於它是一個分隔符（暗示，它不會在形狀中包含任何文本），它更像是一個圖像，SVG完全適合這種情況。 SVG可以自動縮放而不會對實際形狀產生任何影響，並且因為它是基於矢量的，所以它在縮放時也不會像素化。

我們可以使用SVG path或polygons來創建此形狀。 以下是示例代碼段。

 /* Using SVG Path */ 

 svg { height: 100px; width: 1170px; } path#top { fill: rgb(218, 115, 23); } path#bottom { fill: rgb(42, 42, 42); } 

 <svg viewBox='0 0 100 100' preserveAspectRatio='none'> <path d='m 0,0 h 100 l -100,95z' id='top' /> <path d='m 0,100 h 100 l 0,-90z' id='bottom' /> </svg> 

 /* Using SVG Polygons */ 

 svg { height: 100px; width: 1170px; } polygon#top { fill: rgb(218, 115, 23); } polygon#bottom { fill: rgb(42, 42, 42); } 

 <svg viewBox='0 0 100 100' preserveAspectRatio='none'> <polygon points='0,0 100,0 0,95' id='top' /> <polygon points='0,100 100,100 100,10' id='bottom' /> </svg> 

---

使用漸變：

您可以通過對背景使用兩個linear-gradient來實現形狀，並將它們恰當地放置在下面的片段中。 線性漸變可以在不影響形狀的情況下縮放。

 .separator { height: 100px; width: 1170px; background-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 49%, rgb(218, 115, 23) 50%), linear-gradient(to top left, rgb(42, 42, 42) 49%, rgba(0, 0, 0, 0) 50%); background-size: 100% 95%, 100% 90%; background-position: 0% 0%, 0% 90%; background-repeat: no-repeat; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div class="separator"></div> 

這些方法都沒有為中間的白色區域產生完美平滑的輸出。 SVG產生更平滑的邊緣，而漸變產生非常粗糙/粗糙的輸出。