將背景圖像放入帶有偽元素的形狀中

Question

我有一個傾斜的div，我想知道如何在div中獲得完全填充它的圖像。 例如，它是一個矩形，但是在每個末端添加了一個三角形以創建形狀的“傾斜”部分。 我想為每個div提供單獨的圖片（以便填充整個紫色空間），以便能夠有所不同。 感謝您的幫助。

 /*1st set*/ .rrcontainer { padding-bottom: 265px; } .rr h2{ font-family: montserrat; color: white; font-size: 3vw; text-align: center; position: relative; text-align: center; } .rr > div { text-align: center; } .rr { position: relative; height: 250px; background: purple; } .rr.rr-left { z-index: 1; float: left; width: 55%; } .rr.rr-right { z-index: 2; float: right; width: 44%; } .rr:after, .rr:before { content: ""; position: absolute; top: 0; width: 0; height: 0; } .rr-left:after { right: 0; border-left: 100px solid purple; border-bottom: 250px solid white; } .rr-right:before { left: -100px; border-right: 100px solid purple; border-top: 250px solid transparent; } .rr-left > div { margin-right: 100px; margin-left: 50px; } .rr-right > div { margin-right: 50px; margin-left: 25px; } .rr:hover { background: pink; } .rr-left:hover:after { border-left-color: pink; } .rr-right:hover:before { border-right-color: pink; } /*2nd set*/ .llcontainer { padding-bottom: 265px; } .ll h2{ font-family: montserrat; color: white; font-size: 3vw; text-align: center; position: relative; text-align: center; } } .ll > div { text-align: center; } .ll { position: relative; height: 250px; background: purple; } .ll.ll-left { z-index: 1; float: left; width: 55%; } .ll.ll-right { z-index: 2; float: right; width: 44%; } .ll:after, .ll:before { content: ""; position: absolute; top: 0; width: 0; height: 0; } .ll-left:after { right: 0; border-left: 100px solid purple; border-bottom: 250px solid white; } .ll-right:before { left: -100px; border-right: 100px solid purple; border-top: 250px solid transparent; } .ll-left > div { margin-right: 100px; margin-left: 50px; } .ll-right > div { margin-right: 50px; margin-left: 25px; } .ll:hover { background: pink; } .ll-left:hover:after { border-left-color: pink; } .ll-right:hover:before { border-right-color: pink; } 

 <div class="rrcontainer"> <div class="rr rr-left"> <div> <h2>TITLE HERE</h2> </div> </div> <div class="rr rr-right"> <div> <h2>TITLE HERE</h2> </div> </div> </div> <!-- ---------------------------- --> <div class="llcontainer"> <div class="ll ll-left"> <div> <h2>TITLE HERE</h2> </div> </div> <div class="ll ll-right"> <div> <h2>TITLE HERE</h2> </div> </div> </div> 

Answer 1

我只留下一個。 注意，我在“主要” div元素（ <div class="rr rr-left"> ）中添加了背景圖片，對於三角形部分而不是紫色，我使用了transparent 。 希望這就是您所需要的。

 /*1st set*/ .rrcontainer { padding-bottom: 265px; } .rr h2{ font-family: montserrat; color: white; font-size: 3vw; text-align: center; position: relative; text-align: center; } .rr > div { text-align: center; } .rr { position: relative; height: 250px; background: purple; } .rr.rr-left { z-index: 1; float: left; width: 55%; background-image: url(http://lorempixel.com/400/200/); } .rr.rr-right { z-index: 2; float: right; width: 44%; } .rr:after, .rr:before { content: ""; position: absolute; top: 0; width: 0; height: 0; } .rr-left:after { right: 0; border-left: 100px solid transparent; border-bottom: 250px solid white; } .rr-right:before { left: -100px; border-right: 100px solid purple; border-top: 250px solid transparent; } .rr-left > div { margin-right: 100px; margin-left: 50px; } .rr-right > div { margin-right: 50px; margin-left: 25px; } .rr:hover { background: pink; } .rr-left:hover:after { border-left-color: pink; } .rr-right:hover:before { border-right-color: pink; } /*2nd set*/ .llcontainer { padding-bottom: 265px; } .ll h2{ font-family: montserrat; color: white; font-size: 3vw; text-align: center; position: relative; text-align: center; } } .ll > div { text-align: center; } .ll { position: relative; height: 250px; background: purple; } .ll.ll-left { z-index: 1; float: left; width: 55%; } .ll.ll-right { z-index: 2; float: right; width: 44%; } .ll:after, .ll:before { content: ""; position: absolute; top: 0; width: 0; height: 0; } .ll-left:after { right: 0; border-left: 100px solid purple; border-bottom: 250px solid white; } .ll-right:before { left: -100px; border-right: 100px solid purple; border-top: 250px solid transparent; } .ll-left > div { margin-right: 100px; margin-left: 50px; } .ll-right > div { margin-right: 50px; margin-left: 25px; } .ll:hover { background: pink; } .ll-left:hover:after { border-left-color: pink; } .ll-right:hover:before { border-right-color: pink; } 

 <div class="rrcontainer"> <div class="rr rr-left"> <div> <h2>TITLE HERE</h2> </div> </div> <div class="rr rr-right"> <div> <h2>TITLE HERE</h2> </div> </div> </div> <!-- ---------------------------- --> <div class="llcontainer"> <div class="ll ll-left"> <div> <h2>TITLE HERE</h2> </div> </div> <div class="ll ll-right"> <div> <h2>TITLE HERE</h2> </div> </div> </div>