具有透明背景的div之間的三角形分隔符

我想在頁面的各個部分之間添加三角形分隔符。每個部分都有一個透明的背景顏色。具有透明背景的div之間的三角形分隔符

有一個父div包裝各節，並有一個固定的背景圖像。什麼我想要實現

例子：

我無法定位分隔符/箭頭，並圍繞它建立的白邊。

HTML：

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Site Name</title> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
     <div class="wrapper"> 
      <div class="section-1 downarrow"> 
       <p>Section 1</p> 
      </div> 
      <div class="section-2"> 
       <p>Section 2</p> 
      </div> 
      <div class="section-3"> 
       <p>Section 2</p> 
      </div> 
     </div> 
    </body> 
</html>

CSS：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0;padding:0;} 
table {border-collapse:collapse;border-spacing:0;} 
fieldset,img {border:0;} 
ul {list-style:none; list-style-position:outside;} 
a {outline: none;} 

.wrapper { 
    background-image: url('bg.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
} 

.section-1 { 
    height: 500px; 
    background-color: rgba(12, 85, 184, .9);  
} 

.section-2 { 
    height: 500px; 
    background-color: rgba(95, 20, 20, .9); 
} 

.section-3 { 
    height: 500px; 
    background-color: rgba(12, 85, 184, .9); 
} 

.downarrow:after,.downarrow:before { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    width: 50%; 
    z-index: 100; 
    border-bottom: 40px solid #fff; 
    -moz-transform: rotate(0.000001deg); 
    -webkit-transform: rotate(0.000001deg); 
    -o-transform: rotate(0.000001deg); 
    -ms-transform: rotate(0.000001deg); 
    transform: rotate(0.000001deg) 
} 

.downarrow:before { 
    right: 50%; 
    border-right: 40px solid transparent; 
    border-left: 1000px solid #fff; 
} 
.downarrow:after { 
    left: 50%; 
    border-left: 40px solid transparent; 
    border-right: 1000px solid #fff; 
} 

.downarrow { 
    overflow: hidden; 
}

任何幫助或建議，將不勝感激。

來源

2017-09-26 user22939

你可以使用SVG圖像，或者你只需要CSS？ –

是的，我可以使用svg圖像。 – user22939

@ user22939剛發佈了查詢的答案。請查閱。 –

請檢查更新的，我做了一些努力，使其看起來像所提供的示例圖像。請查看代碼。希望對你有所幫助。

注意：請按照要求更新尺寸。它只是一個假人。

.wrap { 
 
    position: relative; 
 
    height:300px; 
 
    overflow: hidden; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    background: url(https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg) no-repeat center center; 
 
    overflow:hidden; 
 
} 
 
.wrap img { 
 
    width: 100%; 
 
    height: auto; 
 
    display: block; 
 
} 
 
.arrow { 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 100%; 
 
    padding-bottom:3%; 
 
    margin-top: -3%; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
} 
 
.arrow:before, .arrow:after { 
 
    content:''; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    width: 50%; 
 
    padding-bottom:inherit; 
 
    background-color: inherit; 
 
    border-top: 2px solid #fff; 
 
} 
 
.arrow:before { 
 
    right: 50%; 
 
    -ms-transform-origin: 100% 100%; 
 
    -webkit-transform-origin: 100% 100%; 
 
    transform-origin: 100% 100%; 
 
    -ms-transform: skewX(45deg); 
 
    -webkit-transform: skewX(45deg); 
 
    transform: skewX(45deg); 
 
    border-right: 3px solid #fff; 
 
    margin-right:-2px; 
 
} 
 
.arrow:after { 
 
    left: 50%; 
 
    -ms-transform-origin: 0 100%; 
 
    -webkit-transform-origin: 0 100%; 
 
    transform-origin: 0 100%; 
 
    -ms-transform: skewX(-45deg); 
 
    -webkit-transform: skewX(-45deg); 
 
    transform: skewX(-45deg); 
 
    border-left: 3px solid #fff; 
 
    margin-left:-2px; 
 
} 
 

 

 

 
.arrow1 { 
 
    position: absolute; 
 
    bottom: 50%; 
 
    width: 100%; 
 
    padding-bottom:3%; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    transform: rotate(180deg); 
 
    margin-bottom: -3%; 
 
} 
 
.arrow1:before, .arrow1:after { 
 
    content:''; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    width: 50%; 
 
    padding-bottom:inherit; 
 
    background-color: inherit; 
 
    border-top: 2px solid #fff; 
 
} 
 
.arrow1:before { 
 
    right: 50%; 
 
    -ms-transform-origin: 100% 100%; 
 
    -webkit-transform-origin: 100% 100%; 
 
    transform-origin: 100% 100%; 
 
    -ms-transform: skewX(45deg); 
 
    -webkit-transform: skewX(45deg); 
 
    transform: skewX(45deg); 
 
    border-right: 3px solid #fff; 
 
    margin-right:-2px; 
 
} 
 
.arrow1:after { 
 
    left: 50%; 
 
    -ms-transform-origin: 0 100%; 
 
    -webkit-transform-origin: 0 100%; 
 
    transform-origin: 0 100%; 
 
    -ms-transform: skewX(-45deg); 
 
    -webkit-transform: skewX(-45deg); 
 
    transform: skewX(-45deg); 
 
    border-left: 3px solid #fff; 
 
    margin-left:-2px; 
 
}

<div class="wrap"> 
 
    <div class="arrow"></div> 
 
    <div class="arrow1"></div> 
 
</div>

來源

2017-09-26 05:52:44

看看我發佈的代碼，它需要看起來像那樣，但在適當的地方使用分隔線。另外，當使用我的代碼上下滾動時，請注意父級div如何具有固定的背景。 – user22939

具有透明背景的div之間的三角形分隔符

回答

相關問題