javascript - css 三角形缺口,
問(wèn)題描述
如圖:
這個(gè)三角形缺口是透明的,請(qǐng)問(wèn)咋個(gè)實(shí)現(xiàn)
大家請(qǐng)注意問(wèn)題的關(guān)鍵,三角形能看見(jiàn)后面的背景
問(wèn)題解答
回答1:我之前的做法是在導(dǎo)航欄上弄弄多一行小小幾px高的p的全是白色背景被選中的那個(gè)背景為一種透明“有缺口白色背景”圖片
回答2:p { width: 0; height: 0; border: 10px solid #fff; border-top-color: transparent;}回答3:
透明的三角形大概是做不出來(lái)的。
但你可以做兩個(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ā)出來(lái),研究一下就知道了
回答6:同意小U醬的說(shuō)法,我也只想到這一個(gè)辦法:
——————————————華麗的分割線———————————————用rotate做出來(lái)的效果:
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. mysql優(yōu)化 - mysql 一張表如果不能確保字段列長(zhǎng)度一致,是不是就不需要用到char。2. mysql 怎么做到update只更新一行數(shù)據(jù)?3. 使用python中的pandas求每個(gè)值占該列的比例4. javascript - 新浪微博網(wǎng)頁(yè)版的字?jǐn)?shù)限制是怎么做的5. python - scrapy 如何組合2個(gè)不同頁(yè)面的數(shù)據(jù),一并存儲(chǔ)6. python2.7 - python 函數(shù)或者類(lèi) 代碼的執(zhí)行順序7. sublime可以用其他編譯器替換嗎?8. javascript - 用jsonp抓取qq音樂(lè)總是說(shuō)回調(diào)函數(shù)沒(méi)有定義9. python - 多態(tài)調(diào)用方法時(shí)卻顯示bound method...10. node.js - mysql如何通過(guò)knex查詢(xún)今天和七天內(nèi)的匯總數(shù)據(jù)
