javascript - css 三角形缺口,
問題描述
如圖:
這個(gè)三角形缺口是透明的,請(qǐng)問咋個(gè)實(shí)現(xiàn)
大家請(qǐng)注意問題的關(guān)鍵,三角形能看見后面的背景
問題解答
回答1:我之前的做法是在導(dǎo)航欄上弄弄多一行小小幾px高的p的全是白色背景被選中的那個(gè)背景為一種透明“有缺口白色背景”圖片
回答2:p { width: 0; height: 0; border: 10px solid #fff; border-top-color: transparent;}回答3:
透明的三角形大概是做不出來的。
但你可以做兩個(gè)白色的梯形,留出中間那個(gè)三角形的位置就行了。
回答4:用border修飾實(shí)現(xiàn)三角形,想要透明用rgba
p{
width: 0;height: 0;border: 10px solid transparent;border-top-color: rgba(0,0,0,0.4)
}
回答5:頁(yè)面地址發(fā)出來,研究一下就知道了
回答6:同意小U醬的說法,我也只想到這一個(gè)辦法:
——————————————華麗的分割線———————————————用rotate做出來的效果:
p::before { content: ''; display: block; position: absolute; bottom: 0; left: -10px; width: 20px; /*自己調(diào)*/ border: 10px solid transparent; border-bottom-color: white;}p::after { content: ''; display: block; position: absolute; bottom: 0; right: -10px; width: 88px; /*自己調(diào)*/ border: 10px solid transparent; border-bottom-color: white;}
相關(guān)文章:
1. javascript - 如何使用loadash對(duì)[object,object,object]形式的數(shù)組進(jìn)行比較2. 這種數(shù)據(jù)怎么合并啊?3. 請(qǐng)教各位大佬,瀏覽器點(diǎn) 提交實(shí)例為什么沒有反應(yīng)4. javascript - 如何清除向可編輯的(contenteditable)元素里粘貼的文本的標(biāo)簽和樣式?5. mysql優(yōu)化 - 關(guān)于mysql分區(qū)6. 如何分別在Windows下用Winform項(xiàng)模板+C#,在MacOSX下用Cocos Application項(xiàng)目模板+Objective-C實(shí)現(xiàn)一個(gè)制作游戲的空的黑窗口?7. angular.js - 百度支持_escaped_fragment_嗎?8. javascript - ionic2 input autofocus 電腦成功,iOS手機(jī)鍵盤不彈出9. nlp - python如何對(duì)一篇文章自動(dòng)分段?10. css3 - 這個(gè)形狀使用CSS怎么寫出來?
