Question

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

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

非常感谢任何帮助或建议。

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: