css - div 中的背景

Question

我通过塑造一个 div 为我的网站标题制作了一个倒三 Angular 形。这是 CSS。

.triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 100px 49vw 0 49vw;
margin-top:-8px;
border-color: gray transparent transparent transparent;
width:0;
height:0;

我想插入一张符合三 Angular 形的图片，而不是灰色作为背景色。有人有什么想法吗？

谢谢亚力克

Answer 1

演示 - http://jsfiddle.net/euppwbub/

您可以使用伪元素:after并使用border隐藏外部额外内容

但你需要为 .triangle 提供 height 和 background-image

.triangle {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Rope.jpg);
  width: 100%;
  height: 100px;
  position: relative;
}
.triangle:after {
  content: '';
  border-style: solid;
  border-width: 100px 50vw 0vh 50vw;
  border-color: transparent white;
  top: 0;
  right: 0;
  left: 0;
  position: absolute;
}

<div class="triangle"></div>