具有透明背景的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之间的三角形分隔符

回答

相关问题