1

I am attempting to display an image, and want it to carry into a little triangle under the <div>. I have seen this question which drags the triangle across the whole page. I would like to display a triangle that only takes up a small space (like the image) Instead of the solid colored background, there's a background image.

enter image description here

div {
  width: 100%;
  background-image: url("https://www.shopmarriott.com/images/products/v2/xlrg/Marriott-platinum-stitch-bed-bedding-set-mar-101-st-gy_xlrg.jpg");
  max-height: 200px;
  padding: 75px;
  position: relative;
  background-size:cover;
  padding-bottom:100px;
  overflow:hidden;
 }
 div:after {
  margin-left:-30px;
  left: 50%;
  content:'';
  margin-left: -30px;
  margin-top: 70px;
  position:absolute;
  border-left:30px solid #fff;
  border-right:30px solid #fff;
  border-top:30px solid transparent;
 }
 h1 {
  color: white;
  font-size: 36px;
  text-align: center;
 }
<div>
<h1>Sheets</h1>
</div>
Gautam Naik
  • 8,990
  • 3
  • 27
  • 42
BareHome
  • 19
  • 6

2 Answers2

4

You would have to use clip-path if your using a background image.

div {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 500px;
    height: 500px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 66% 75%, 50% 99%, 33% 75%, 0% 75%);
      clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 66% 75%, 50% 99%, 33% 75%, 0% 75%);
}
<div></div>

To help you create the size and style you want you can use this online Clippy tool (hint: select the "Message" pre-made shape and play with that)

zgood
  • 12,181
  • 2
  • 25
  • 26
-1
.container {
position:relative;
background-color:#e15915;
height:320px !important;
width:100% !important;
}

.container:after {
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}

http://jsfiddle.net/9AbYc/1/

Peshraw H. Ahmed
  • 439
  • 3
  • 22
  • I understand this works for a solid background, but with a background image this only creates a solid colored triangle. – BareHome May 03 '18 at 18:57