javascript - css 三角形缺口，

問題描述

如圖：

這個三角形缺口是透明的，請問咋個實現

大家請注意問題的關鍵，三角形能看見后面的背景

問題解答

我之前的做法是在導航欄上弄弄多一行小小幾px高的p的全是白色背景被選中的那個背景為一種透明“有缺口白色背景”圖片

p { width: 0; height: 0; border: 10px solid #fff; border-top-color: transparent;}回答3：

透明的三角形大概是做不出來的。

但你可以做兩個白色的梯形，留出中間那個三角形的位置就行了。

用border修飾實現三角形，想要透明用rgba

p{

width: 0;height: 0;border: 10px solid transparent;border-top-color: rgba(0,0,0,0.4)

}

頁面地址發出來，研究一下就知道了

同意小U醬的說法，我也只想到這一個辦法：

——————————————華麗的分割線———————————————用rotate做出來的效果：

p::before { content: ''; display: block; position: absolute; bottom: 0; left: -10px; width: 20px; /*自己調*/ border: 10px solid transparent; border-bottom-color: white;}p::after { content: ''; display: block; position: absolute; bottom: 0; right: -10px; width: 88px; /*自己調*/ border: 10px solid transparent; border-bottom-color: white;}