Bootstrap;使DIV看起來像一個三角形連接的圖像

Question

我做幾個div的看起來像作爲atttached像我能做到這一點使用背景圖像像這樣

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/的例子。