我正在尝试完成您在此图像顶部看到的三角形部分:
我尝试了几种方法,但都没有成功。
如果图像大小改变,我需要三角形能够响应式调整大小。 而且我不希望容器 div 因为三角形而扩展。 但是我无法固定 div 的高度,因为它会随着图像大小的变化而改变。 我不想在 Photoshop 中制作三角形并导出图像,因为当你点击它时,你也会看到三角形。
有什么好的方法可以实现这个需求吗?
以下是我尝试过的方法:
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.image{
width:100%;
}
<div class="imageTriangle">
<img src="image.jpg">
<div class="arrow-down"></div>
</div>