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. 我在centos容器里安裝docker,也就是在容器里安裝容器,報(bào)錯(cuò)了?2. docker 17.03 怎么配置 registry mirror ?3. 老哥們求助啊4. 我的html頁(yè)面一提交,網(wǎng)頁(yè)便顯示出了我的php代碼,求問(wèn)是什么原因?5. django - 后臺(tái)返回的json數(shù)據(jù)經(jīng)過(guò)Base64加密,獲取時(shí)用python如何解密~!6. html5 - angularjs中外部模版加載無(wú)法使用7. css3 - 請(qǐng)問(wèn)一下在移動(dòng)端CSS布局布局中通常需要用到哪些元素,屬性?8. tp6表單令牌9. angular.js - 如何通俗易懂的解釋“依賴注入”?10. node.js - node 客戶端socket一直報(bào)錯(cuò)Error: read ECONNRESET,用php的socket沒(méi)問(wèn)題哈。。
