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. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問(wèn)題2. javascript - (_a = [""], _a.raw = [""],....); js一個(gè)小括號(hào)的是什么意思?3. javascript - 關(guān)于微信掃一掃的技術(shù)問(wèn)題4. html - Python2 BeautifulSoup 提取網(wǎng)頁(yè)中的表格數(shù)據(jù)及連接5. javascript - 關(guān)于js高級(jí)程序中的問(wèn)題6. html5 - 請(qǐng)問(wèn)利用font-face定義的字體怎么在canvas里應(yīng)用?7. 小白學(xué)python的問(wèn)題 關(guān)于%d和%s的區(qū)別8. html5 - css 這種六邊形的邊框怎么畫(huà)?9. javascript - vuex中子組件無(wú)法調(diào)用公共狀態(tài)10. javascript - js正則替換日期格式問(wèn)題
