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:頁面地址發(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 - immutable配合react提升性能?2. javascript - sublime快鍵鍵問題3. javascript - nodejs關(guān)于進(jìn)程間發(fā)送句柄的一點(diǎn)疑問4. Apache 已經(jīng)把網(wǎng)站根目錄的改為allow from all了,但是服務(wù)器還是不能訪問?5. 實(shí)現(xiàn)bing搜索工具urlAPI提交6. javascript - 移動(dòng)端上不能實(shí)現(xiàn)拖拽布局嗎?7. vue.js - Vue 如何像Angular.js watch 一樣監(jiān)聽數(shù)據(jù)變化8. phpstudy8.1支持win11系統(tǒng)嗎?9. 配置Apache時(shí),添加對(duì)PHP的支持時(shí)語法錯(cuò)誤10. css - 寫頁面遇到個(gè)布局問題,求大佬們幫解答,在線等,急!~

網(wǎng)公網(wǎng)安備