Question

我通过塑造一个div为我的网站标题制作了一个颠倒的三角形。这是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;

}

我想插入符合三角形的图片，而不是灰色作为背景颜色。有没有人有任何想法？

由于艾力

Answer 1

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

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

但您需要为height

提供background-image和.triangle

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

Answer 2

如果宽度为0，则无法设置背景图像。它将永远不可见。您可以在普通div中显示三角形图像，而不是创建三角形并显示图像。我知道这并没有真正回答这个问题，但这就是你如何做到的。

Answer 3

不是显示图像的三角形，而是可以做一个显示图像的常规div，然后用另外两个指向另一个方向的三角形div覆盖它的一部分来覆盖它。

所以你会得到你的图像div然后使用定位你有一个白色三角形朝上，顶点与div的左边齐平，另一个位于div最右边的顶点。

不是超级实用，但它可以达到你想要的效果。

你应该只使用一个已经呈三角形状的图像，除非你打算使用不同的用户图像，例如你没有实用的方法手工编辑。

div中的背景

3 个答案: