how to create a slanted transparent shape with background image?

Question

I want to achieve something like this - it has a background image. I only able to make a slanted div like this-

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

but how can I make it transparent with a background image? can anyone please help me

Eventually clip-path will be an option, but as it's not supported in IE/Edge you'll need to use a different solution. One that I've used on a recent project involves overlaying a white triangular :before node on top of the rectangular background color & image, but that comes with its own set of tradeoffs. — zzzzBov
– zzzzBov, Commented Jul 19, 2017 at 4:02

shiva krishna · Accepted Answer · 2019-11-12 12:47:26Z

here i tried the example, i hope this will help you ,just copy the entire code in an html page and see the output..., or see snippet below

.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://tractionnext.com/wp-content/uploads/2019/01/book-demo-hero-background.jpg) 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://tractionnext.com/wp-content/uploads/2019/01/book-demo-hero-background.jpg" /><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>

shiva krishna · Accepted Answer · 2017-07-19 04:48:31Z

i have tried a new one just look into it , ignore me if you not agree

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

Supraja Ganji · Accepted Answer · 2017-07-19 06:33:52Z

0

I hope this helps, I gave linear-gradient in :before of .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>

answered Jul 19, 2017 at 6:33

Supraja Ganji

1,2071 gold badge7 silver badges8 bronze badges

1 Comment

Supraja Ganji Over a year ago

else if your are ok with using 'clip-path'(not supported in IE, Edge) here is my fiddle jsfiddle.net/11qrp5xk

Kerry7777 · Accepted Answer · 2017-07-22 05:30:50Z

This is my revised version (simplified)

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

Collectives™ on Stack Overflow

how to create a slanted transparent shape with background image?

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related