如何在一个不断显示背景图像的div下放置一个小三角形？

Question

我正在尝试显示图像，并希望它在<div>下面进入一个小三角形。我看到这个question在整个页面上拖动了三角形。我想显示一个只占用一个小空间的三角形（如图像）而不是纯色背景，有一个背景图像。

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>

Answer 1

如果您使用背景图片，则必须使用clip-path。

＆＃13;

＆＃13;

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%);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

为了帮助您创建所需的大小和样式，您可以使用此在线Clippy工具（提示：选择＆＃34;消息＆＃34;预制形状并使用它）

Answer 2

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