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

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

css

Css 具有透明背景的div之间的三角形分隔符,css,Css,我想在页面的各个部分之间添加三角形分隔符。每个部分都有一个透明的背景色有一个父div环绕这些部分，并有一个固定的背景图像我正在努力实现的示例：我无法定位分隔符/箭头并在其周围创建白色边框 HTML: 如果您有任何帮助或建议，我们将不胜感激。请查看更新后的图片，我已根据提供的示例图片做出了一些努力使其看起来像。请检查代码。希望对你有帮助注：请根据要求相应更新尺寸。它只是一个傀儡 .wrap{ 位置：相对位置；高度：300px；溢出：隐藏；宽度：80%；保证金：0自动；背景：u

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

有一个父div环绕这些部分，并有一个固定的背景图像

我正在努力实现的示例：

我无法定位分隔符/箭头并在其周围创建白色边框

HTML:

如果您有任何帮助或建议，我们将不胜感激。

请查看更新后的图片，我已根据提供的示例图片做出了一些努力使其看起来像。请检查代码。希望对你有帮助

注：请根据要求相应更新尺寸。它只是一个傀儡

.wrap{
位置：相对位置；
高度：300px；
溢出：隐藏；
宽度：80%；
保证金：0自动；
背景：url(https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg)无重复中心；
溢出：隐藏；
}
.包裹img{
宽度：100%；
高度：自动；
显示：块；
}
.阿罗{
位置：绝对位置；
最高：50%；
宽度：100%；
垫底：3%；
利润率最高：-3%；
背景色：rgba（0,0,0,0.8）；
}
.arrow:之前.arrow:之后{
内容：''；
位置：绝对位置；
底部：100%；
宽度：50%；
填充底部：继承；
背景色：继承；
边框顶部：2个实心#fff；
}
.阿罗：以前{
右：50%；
-ms变换原点：100%100%；
-webkit转换来源：100%100%；
变换原点：100%100%；
-ms变换：skewX（45度）；
-webkit变换：skewX（45度）；
变换：skewX（45度）；
右边框：3px实心#fff；
右边距：-2px；
}
.阿罗：之后{
左：50%；
-ms变换原点：0.100%；
-webkit转换来源：0 100%；
变换原点：0.100%；
-ms变换：skewX（-45度）；
-webkit变换：skewX（-45度）；
变换：skewX（-45度）；
左边框：3倍实心#fff；
左边距：-2px；
}
.箭头1{
位置：绝对位置；
底部：50%；
宽度：100%；
垫底：3%；
背景色：rgba（0,0,0,0.8）；
变换：旋转（180度）；
利润底部：-3%；
}
.arrow1:之前.arrow1:之后{
内容：''；
位置：绝对位置；
底部：100%；
宽度：50%；
填充底部：继承；
背景色：继承；
边框顶部：2个实心#fff；
}
.1:之前{
右：50%；
-ms变换原点：100%100%；
-webkit转换来源：100%100%；
变换原点：100%100%；
-ms变换：skewX（45度）；
-webkit变换：skewX（45度）；
变换：skewX（45度）；
右边框：3px实心#fff；
右边距：-2px；
}
.1：之后{
左：50%；
-ms变换原点：0.100%；
-webkit转换来源：0 100%；
变换原点：0.100%；
-ms变换：skewX（-45度）；
-webkit变换：skewX（-45度）；
变换：skewX（-45度）；
左边框：3倍实心#fff；
左边距：-2px；
}

您可以使用svg图像，还是只需要css？是的，我可以使用svg图像。@user22939刚刚发布了您查询的答案。请检查。看看我发布的代码，它需要看起来像那样，但是在适当的地方有分隔符。另外，请注意在使用“我的代码”上下滚动时，父div的背景是如何固定的。

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

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