Background image in diagonal div clip-path

Question

Background image in diagonal div clip-path

Navigation

#1 by (2 votes)

1

I was able to do this with solid color background

.slide {
	width: 100%;
	height: 101px;
  background-color: #fff;
  background-size: cover;
  clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}
.slide_bg{
  background-color: #f5f5f5;
  padding-bottom:20px;
   padding-left:20px;
  }
.slide_end {
	width: 100%;
	height: 101px;
  background-color:#f5f5f5;
  background-size: cover;
  clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}

.slide_end_bg {
	width: 100%;
	
  background-color:#fff;
  
}

<div class="slide_bg">

<p>
asdasdasd
</p>
<p>
asdasdasd
</p>
<p>
asdasdasd
</p>
</div>

<div class="slide_end_bg">
<div class="slide_end">
  
</div>
</div>

How can I put a background image in a div with the clip-path diagonally?

html css3 clip-path

asked by anonymous 10.07.2018 / 16:16

1 answer

Is it valid for two objects to have reciprocal references? IDE Tips / How to do?

score 2 · Accepted Answer

The way you put your html/css you can not, because you have an element where you put the text and another where you put the clip-path , you need to be an element with only the text and bg catching clip-path integer.

Your structure was this way, but it needs to be all one element ... There's no way you can make BG go from green to red, you have to put them together in clip-path single

Hereisanexamplecorrectingthis.

YouwillseethatIgaveupasimplifiedoneinthecodetowork.Iputtheclip-pathinthesameelementthatwillhavethetextdendroandIusedabackground-imageanditwasallright

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.slide_bg {
  padding-top: 0.75em;
  padding-bottom: 6em;
  box-sizing: border-box;
  padding-left: 20px;
  background-image: url(http://placecage.com/620/380);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-clip-path: polygon(100% 0, 100% 70%, 50% 100%, 0 70%, 0 0);
  clip-path: polygon(100% 0, 100% 70%, 50% 100%, 0 70%, 0 0);
  margin-bottom: 2rem;
}
.slide_bg:nth-child(2) {
  background-image: url(http://placecage.com/620/383);
}

<div class="slide_bg">
    <p>
        asdasdasd
    </p>
    <p>
        asdasdasd
    </p>
    <p>
        asdasdasd
    </p>
</div>

<div class="slide_bg">
    <div>
        asdasdasd
    </div>
    <p>
        asdasdasd
    </p>
    <span>
        asdasdasd
    </span>
</div>