具有透明背景的 div 之间的三角形分隔符答案

【问题标题】：Triangle separators between divs with transparent backgrounds具有透明背景的 div 之间的三角形分隔符
【发布时间】：2017-09-26 13:55:02
【问题描述】：

我想在页面的各个部分之间添加三角形分隔符。每个部分都有一个透明的背景颜色。

有一个父 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;
}

任何帮助或建议将不胜感激。

【问题讨论】：

你可以使用svg图片，还是只需要css？
是的，我可以使用 svg 图片。
@user22939 刚刚发布了您查询的答案。请查看。

标签： css

【解决方案1】：

请检查更新的，我做了一些努力使它看起来像提供的示例图像。请查看代码。希望对您有所帮助。

注意：请根据要求相应地更新尺寸。它只是一个假人。

.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>

【讨论】：

看看我发布的代码，它需要看起来像那样，但分隔线在适当的位置。另外，请注意使用我的代码上下滚动时父 div 是如何具有固定背景的。