引导;使div看起来像一个三角形作为附加图像

Question

我可以让几个div看起来像一个附着的图像我可以使用这样的div的背景图像实现这个

background:url(image.png) no-repeat left top; 

但我只是想知道在没有使用背景图片的情况下是否还有其他办法可以帮助我

我已经查看了css三角形的一些代码，但它们看起来不像这样，如果可能的话请帮助我做这个没有图像

Answer 1

我尝试重现你的形象。你想要这样吗？

您必须调整边框宽度和元素比例

Codepen

#mydiv {
    height: 17px;
    width: 100px;
    border-top: 51px solid transparent;
    border-left: 1130px solid wheat;
}

如果您可以更具体地了解您的需求或重现，我将能够为您提供一些解决方案。

Answer 2

您可以尝试边框底部，边框左侧，高度的组合。基本上，三角形有额外的高度。或者，您可以在矩形的顶部放置一个三角形。

有关示例，请参阅https://css-tricks.com/examples/ShapesOfCSS/。