javascript - css 三角形缺口,
問題描述
如圖:
這個三角形缺口是透明的,請問咋個實現
大家請注意問題的關鍵,三角形能看見后面的背景
問題解答
回答1:我之前的做法是在導航欄上弄弄多一行小小幾px高的p的全是白色背景被選中的那個背景為一種透明“有缺口白色背景”圖片
回答2:p { width: 0; height: 0; border: 10px solid #fff; border-top-color: transparent;}回答3:
透明的三角形大概是做不出來的。
但你可以做兩個白色的梯形,留出中間那個三角形的位置就行了。
回答4:用border修飾實現三角形,想要透明用rgba
p{
width: 0;height: 0;border: 10px solid transparent;border-top-color: rgba(0,0,0,0.4)
}
回答5:頁面地址發出來,研究一下就知道了
回答6:同意小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;}
相關文章:
1. css3 - 沒明白盒子的height隨width的變化這段css是怎樣實現的?2. java - 根據月份查詢多個表里的內容怎么實現好?3. python3.x - c++調用python34. javascript - 在 model里定義的 引用表模型時,model為undefined。5. php工具中的mysql還是5.1以下的,請問如何才能升級到5.1以上?6. css3 - 這個右下角折角用css怎么畫出來?7. atom開始輸入!然后按tab只有空格出現沒有html格式出現8. javascript - 移動端自適應9. android - 課程表點擊后浮動后邊透明可以左右滑動的界面是什么?10. apache - 想把之前寫的單機版 windows 軟件改成網絡版,讓每個用戶可以注冊并登錄。類似 qq 的登陸,怎么架設服務器呢?
