如何用背景图像创建倾斜的透明形状？

问题描述：

我想实现这样的事情 - 它有一个背景image。我只能够进行倾斜DIV像这个 -如何用背景图像创建倾斜的透明形状？

.shape { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 290px; 
 
    background: rgba(6, 180, 248, 1); 
 
} 
 

 
.shape:after { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    content: ""; 
 
    background: inherit; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    transform-origin: top left; 
 
    transform: skewY(-4deg); 
 
}

<br><br><br> 
 
<section class="container"> 
 
    <div class="shape"> 
 

 
    </div> 
 
</section>

，但我怎样才能使它透明的背景图像？任何人都可以请帮我

[最终剪辑路径将是一个选项]（http://caniuse.com/#feat=css-clip-path），但由于IE/Edge不支持，所以您需要使用不同的解决方案。我最近使用的一个项目涉及在矩形背景颜色和图像顶部覆盖一个白色三角形'：before'节点，但是它有自己的一套权衡。 – zzzzBov

答

在这里，我尝试过的例子，我希望这会帮助你，只是整个代码复制在HTML页面中，看到输出...，或见下文片断

\t .hero img { 
 
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); 
 
      clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); 
 
    } 
 

 
    .promo { 
 
     -webkit-clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%); 
 
      clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%); 
 
} 
 

 
.hero { 
 
    color: #fff; 
 
    font-family: 'Fira Sans', sans-serif; 
 
    position: relative; 
 
    text-align: center; 
 
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); 
 
} 
 
.hero img { 
 
    width: 100%; 
 
} 
 
.hero figcaption { 
 
    left: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
      transform: translate(-50%, -50%); 
 
    width: 100%; 
 
} 
 
.hero h1 { 
 
    font-size: 32px; 
 
} 
 
.hero p { 
 
    font-size: 14px; 
 
    font-weight: 300; 
 
    margin-top: 0.5em; 
 
} 
 

 
.promo { 
 
    background: url(https://unsplash.it/1600/900?image=830) no-repeat; 
 
    background-size: cover; 
 
    color: #fff; 
 
    font-family: 'Fira Sans', sans-serif; 
 
    margin: 50px 0; 
 
    overflow: hidden; 
 
    padding: 150px 20px; 
 
    position: relative; 
 
    text-align: center; 
 
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); 
 
} 
 
.promo h1 { 
 
    font-size: 32px; 
 
} 
 
.promo p { 
 
    font-size: 14px; 
 
    font-weight: 300; 
 
    margin-top: 0.5em; 
 
} 
 

 
.quote { 
 
    background: #41ade5; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.quote:before, .quote:after { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.quote:before { 
 
    top: 0; 
 
    -webkit-transform: skewY(1.5deg); 
 
      transform: skewY(1.5deg); 
 
    -webkit-transform-origin: 100% 0; 
 
      transform-origin: 100% 0; 
 
} 
 
.quote:after { 
 
    bottom: 0; 
 
    -webkit-transform: skewY(-1.5deg); 
 
      transform: skewY(-1.5deg); 
 
    -webkit-transform-origin: 100%; 
 
      transform-origin: 100%; 
 
} 
 

 
.quote { 
 
    color: #fff; 
 
    font-family: 'Fira Sans', sans-serif; 
 
    margin: 50px 0; 
 
    padding: 20% 20px; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    font-size: 32px; 
 
    font-weight: 500; 
 
} 
 

 
.edge--bottom { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.edge--bottom:after { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.edge--bottom:after { 
 
    bottom: 0; 
 
    -webkit-transform: skewY(-1.5deg); 
 
      transform: skewY(-1.5deg); 
 
    -webkit-transform-origin: 100%; 
 
      transform-origin: 100%; 
 
} 
 

 
.edge--bottom--reverse { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.edge--bottom--reverse:after { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.edge--bottom--reverse:after { 
 
    bottom: 0; 
 
    -webkit-transform: skewY(1.5deg); 
 
      transform: skewY(1.5deg); 
 
    -webkit-transform-origin: 0 100%; 
 
      transform-origin: 0 100%; 
 
} 
 

 
.edge--top { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.edge--top:before { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.edge--top:before { 
 
    top: 0; 
 
    -webkit-transform: skewY(1.5deg); 
 
      transform: skewY(1.5deg); 
 
    -webkit-transform-origin: 100% 0; 
 
      transform-origin: 100% 0; 
 
} 
 

 
.edge--top--reverse { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.edge--top--reverse:before { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.edge--top--reverse:before { 
 
    top: 0; 
 
    -webkit-transform: skewY(-1.5deg); 
 
      transform: skewY(-1.5deg); 
 
    -webkit-transform-origin: 0 0; 
 
      transform-origin: 0 0; 
 
} 
 

 
.edge--both { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.edge--both:before, .edge--both:after { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.edge--both:before { 
 
    top: 0; 
 
    -webkit-transform: skewY(1.5deg); 
 
      transform: skewY(1.5deg); 
 
    -webkit-transform-origin: 100% 0; 
 
      transform-origin: 100% 0; 
 
} 
 
.edge--both:after { 
 
    bottom: 0; 
 
    -webkit-transform: skewY(-1.5deg); 
 
      transform: skewY(-1.5deg); 
 
    -webkit-transform-origin: 100%; 
 
      transform-origin: 100%; 
 
} 
 

 
.edge--both--reverse { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.edge--both--reverse:before, .edge--both--reverse:after { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.edge--both--reverse:before { 
 
    top: 0; 
 
    -webkit-transform: skewY(-1.5deg); 
 
      transform: skewY(-1.5deg); 
 
    -webkit-transform-origin: 0 0; 
 
      transform-origin: 0 0; 
 
} 
 
.edge--both--reverse:after { 
 
    bottom: 0; 
 
    -webkit-transform: skewY(1.5deg); 
 
      transform: skewY(1.5deg); 
 
    -webkit-transform-origin: 0 0; 
 
      transform-origin: 0 0; 
 
} 
 

 
.-berry { 
 
    background: #b52b4a; 
 
} 
 

 
.-blue { 
 
    background: #41ade5; 
 
} 
 

 
.-orange { 
 
    background: #de6628; 
 
} 
 

 
.-green { 
 
    background: #5e9b42; 
 
} 
 

 
.block { 
 
    color: #fff; 
 
    font-family: 'Fira Sans', sans-serif; 
 
    margin: 0 0 200px; 
 
    padding: 20% 20px; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    font-size: 32px; 
 
    font-weight: 500; 
 
} 
 

 
p { 
 
    font-size: 14px; 
 
    font-weight: 300; 
 
    margin-top: 0.5em; 
 
}

<div class="hero"> 
 
    <figure> 
 
    <img src="https://unsplash.it/1600/900?image=830" /><figcaption> 
 
     <h1> 
 
     Angled Edge 
 
     </h1> 
 
     <p> 
 
     Image with CSS clip-path 
 
     </p> 
 
    </figcaption> 
 
    </figure> 
 
</div> 
 
<div class="promo"> 
 
    <h1> 
 
    Angled Edge 
 
    </h1> 
 
    <p> 
 
    CSS background with CSS clip-path 
 
    </p> 
 
</div> 
 
<div class="quote"> 
 
    <h1> 
 
    Angled Edges 
 
    </h1> 
 
    <p> 
 
    With 2 Pseudo Elements 
 
    </p> 
 
</div> 
 
<div class="block -berry edge--bottom"> 
 
    <h1> 
 
    Bottom Angled Edge 
 
    </h1> 
 
</div> 
 
<div class="block -blue edge--bottom--reverse"> 
 
    <h1> 
 
    Bottom Angled Edge 
 
    </h1> 
 
    <p> 
 
    Reversed 
 
    </p> 
 
</div> 
 
<div class="block -berry edge--top"> 
 
    <h1> 
 
    Top Angled Edge 
 
    </h1> 
 
</div> 
 
<div class="block -blue edge--top--reverse"> 
 
    <h1> 
 
    Top Angled Edge 
 
    </h1> 
 
    <p> 
 
    Reversed 
 
    </p> 
 
</div> 
 
<div class="block -orange edge--both"> 
 
    <h1> 
 
    Top & Bottom Angled Edges 
 
    </h1> 
 
</div> 
 
<div class="block -green edge--both--reverse"> 
 
    <h1> 
 
    Top & Bottom Angled Edges 
 
    </h1> 
 
    <p> 
 
    Reversed 
 
    </p> 
 
</div>

我也想要一个透明的图像颜色！ – azizul

答

这是我的修订版（简体）

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>SLANTED</title> 
 
    <style> 
 
     
 
     body 
 
     { 
 
      margin:0; 
 
      padding:0; 
 
      font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
 
      background: url(https://unsplash.it/1600/900?image=830) no-repeat 0 0; 
 
      background-size: 100% auto; 
 
     } 
 

 
     * 
 
     { 
 
      -webkit-box-sizing:border-box; 
 
      box-sizing:border-box; 
 
     } 
 
     
 
     h1 
 
     { 
 
      max-width:80%; 
 
      margin:auto; 
 
      font-size: 46px; 
 
      text-align:center; 
 
      padding: 10% 0; 
 
      color: #FFF; 
 
     } 
 

 

 
     .container 
 
     { 
 
      width:100%; 
 
      min-height:450px; 
 
     } 
 
     
 
     .container::after { 
 
      content: ''; 
 
      display: block; 
 
      width: 100%; 
 
      height: 80px; 
 
      position: absolute; 
 
      transform: skewY(-2deg); 
 
      background-color: #fff; 
 
      bottom: -45px; 
 
     } 
 

 
    </style> 
 
</head> 
 
<body> 
 
    <section class="container"> 
 
    <div class="shape"> 
 
     <h1>We always do something with pure CSS&hellip;</h1> 
 
    </div> 
 
    </section> 
 
    <h2>Sub sections</h2> 
 
    <h2>Sub sections</h2> 
 
    <h2>Sub sections</h2> 
 
    <h2>Sub sections</h2> 
 
    <h2>Sub sections</h2> 
 
    <h2>Sub sections</h2> 
 
</body> 
 
</html>

答

我已经尝试了新的只需要看着它，不理我，如果你不同意

.hero img { 
 
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); 
 
      clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); 
 
    } 
 

 
    .promo { 
 
     -webkit-clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%); 
 
      clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%); 
 
} 
 

 
.hero { 
 
    color: #fff; 
 
    font-family: 'Fira Sans', sans-serif; 
 
    position: relative; 
 
    text-align: center; 
 
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); 
 
} 
 
.hero img { 
 
    width: 100%; 
 
} 
 
.hero figcaption { 
 
    left: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
      transform: translate(-50%, -50%); 
 
    width: 100%; 
 
} 
 
.hero h1 { 
 
    font-size: 32px; 
 
} 
 
.hero p { 
 
    font-size: 14px; 
 
    font-weight: 300; 
 
    margin-top: 0.5em; 
 
} 
 

 
.promo { 
 
    /*background: url(https://unsplash.it/1600/900?image=830) no-repeat;*/ 
 
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-size: cover; 
 
    color: #fff; 
 
    font-family: 'Fira Sans', sans-serif; 
 
    margin: 50px 0; 
 
    overflow: hidden; 
 
    padding: 150px 20px; 
 
    position: relative; 
 
    text-align: center; 
 
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); 
 
} 
 
.promo h1 { 
 
    font-size: 32px; 
 
} 
 
.promo p { 
 
    font-size: 14px; 
 
    font-weight: 300; 
 
    margin-top: 0.5em; 
 
} 
 

 
.quote { 
 
    background: #41ade5; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.quote:before, .quote:after { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.quote:before { 
 
    top: 0; 
 
    -webkit-transform: skewY(1.5deg); 
 
      transform: skewY(1.5deg); 
 
    -webkit-transform-origin: 100% 0; 
 
      transform-origin: 100% 0; 
 
} 
 
.quote:after { 
 
    bottom: 0; 
 
    -webkit-transform: skewY(-1.5deg); 
 
      transform: skewY(-1.5deg); 
 
    -webkit-transform-origin: 100%; 
 
      transform-origin: 100%; 
 
} 
 

 
.quote { 
 
    color: #fff; 
 
    font-family: 'Fira Sans', sans-serif; 
 
    margin: 50px 0; 
 
    padding: 20% 20px; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    font-size: 32px; 
 
    font-weight: 500; 
 
} 
 

 
.edge--bottom { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.edge--bottom:after { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.edge--bottom:after { 
 
    bottom: 0; 
 
    -webkit-transform: skewY(-1.5deg); 
 
      transform: skewY(-1.5deg); 
 
    -webkit-transform-origin: 100%; 
 
      transform-origin: 100%; 
 
} 
 

 
.edge--bottom--reverse { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.edge--bottom--reverse:after { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.edge--bottom--reverse:after { 
 
    bottom: 0; 
 
    -webkit-transform: skewY(1.5deg); 
 
      transform: skewY(1.5deg); 
 
    -webkit-transform-origin: 0 100%; 
 
      transform-origin: 0 100%; 
 
} 
 

 
.edge--top { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.edge--top:before { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.edge--top:before { 
 
    top: 0; 
 
    -webkit-transform: skewY(1.5deg); 
 
      transform: skewY(1.5deg); 
 
    -webkit-transform-origin: 100% 0; 
 
      transform-origin: 100% 0; 
 
} 
 

 
.edge--top--reverse { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.edge--top--reverse:before { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.edge--top--reverse:before { 
 
    top: 0; 
 
    -webkit-transform: skewY(-1.5deg); 
 
      transform: skewY(-1.5deg); 
 
    -webkit-transform-origin: 0 0; 
 
      transform-origin: 0 0; 
 
} 
 

 
.edge--both { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.edge--both:before, .edge--both:after { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.edge--both:before { 
 
    top: 0; 
 
    -webkit-transform: skewY(1.5deg); 
 
      transform: skewY(1.5deg); 
 
    -webkit-transform-origin: 100% 0; 
 
      transform-origin: 100% 0; 
 
} 
 
.edge--both:after { 
 
    bottom: 0; 
 
    -webkit-transform: skewY(-1.5deg); 
 
      transform: skewY(-1.5deg); 
 
    -webkit-transform-origin: 100%; 
 
      transform-origin: 100%; 
 
} 
 

 
.edge--both--reverse { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.edge--both--reverse:before, .edge--both--reverse:after { 
 
    background: inherit; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 
.edge--both--reverse:before { 
 
    top: 0; 
 
    -webkit-transform: skewY(-1.5deg); 
 
      transform: skewY(-1.5deg); 
 
    -webkit-transform-origin: 0 0; 
 
      transform-origin: 0 0; 
 
} 
 
.edge--both--reverse:after { 
 
    bottom: 0; 
 
    -webkit-transform: skewY(1.5deg); 
 
      transform: skewY(1.5deg); 
 
    -webkit-transform-origin: 0 0; 
 
      transform-origin: 0 0; 
 
} 
 

 
.-berry { 
 
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
} 
 

 
.-blue { 
 
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 

 
} 
 

 
.-orange { 
 
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
} 
 

 
.-green { 
 
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830"); 
 
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); 
 
} 
 

 
.block { 
 
    color: #fff; 
 
    font-family: 'Fira Sans', sans-serif; 
 
    margin: 0 0 200px; 
 
    padding: 20% 20px; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    font-size: 32px; 
 
    font-weight: 500; 
 
} 
 

 
p { 
 
    font-size: 14px; 
 
    font-weight: 300; 
 
    margin-top: 0.5em; 
 
}

<div class="hero"> 
 
    <figure> 
 
    <img src="https://unsplash.it/1600/900?image=830" /><figcaption> 
 
     <h1> 
 
     Angled Edge 
 
     </h1> 
 
     <p> 
 
     Image with CSS clip-path 
 
     </p> 
 
    </figcaption> 
 
    </figure> 
 
</div> 
 
<div class="promo"> 
 
    <h1> 
 
    Angled Edge 
 
    </h1> 
 
    <p> 
 
    CSS background with CSS clip-path 
 
    </p> 
 
</div> 
 
<div class="quote"> 
 
    <h1> 
 
    Angled Edges 
 
    </h1> 
 
    <p> 
 
    With 2 Pseudo Elements 
 
    </p> 
 
</div> 
 
<div class="block -berry edge--bottom"> 
 
    <h1> 
 
    Bottom Angled Edge 
 
    </h1> 
 
</div> 
 
<div class="block -blue edge--bottom--reverse"> 
 
    <h1> 
 
    Bottom Angled Edge 
 
    </h1> 
 
    <p> 
 
    Reversed 
 
    </p> 
 
</div> 
 
<div class="block -berry edge--top"> 
 
    <h1> 
 
    Top Angled Edge 
 
    </h1> 
 
</div> 
 
<div class="block -blue edge--top--reverse"> 
 
    <h1> 
 
    Top Angled Edge 
 
    </h1> 
 
    <p> 
 
    Reversed 
 
    </p> 
 
</div> 
 
<div class="block -orange edge--both"> 
 
    <h1> 
 
    Top & Bottom Angled Edges 
 
    </h1> 
 
</div> 
 
<div class="block -green edge--both--reverse"> 
 
    <h1> 
 
    Top & Bottom Angled Edges 
 
    </h1> 
 
    <p> 
 
    Reversed 
 
    </p> 
 
</div>

答

我希望这可以帮助，我在:before给linear-gradient的.shape

.shape { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 290px; 
 
    background-image: url(https://unsplash.it/1600/900?image=830); 
 
    background-size: 100% 290px; 
 
    color: #fff; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    height: 100%; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.shape:before { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 20%; 
 
    content: ""; 
 
    background: linear-gradient(to right bottom, rgba(255, 255, 255, 1) 50%, transparent 50%); 
 
}

<section class="container"> 
 
    <div class="shape"> 
 
    <div class="content"> 
 
    Some text here 
 
    </div> 
 
    </div> 
 
</section>

其他如果你可以使用'剪辑路径'（不支持IE，Edge）这里是我的小提琴https://jsfiddle.net/11qrp5xk/ –

如何用背景图像创建倾斜的透明形状？

相关推荐