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:
透明的三角形大概是做不出來(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醬的說法,我也只想到這一個(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. javascript - node.js promise沒用2. golang - 用IDE看docker源碼時(shí)的小問題3. c++ - 如何正確的使用QWebEngineView?4. yii2中restful配置好后在nginx下報(bào)404錯(cuò)誤5. javascript - js 寫一個(gè)正則 提取文本中的數(shù)據(jù)6. 算法 - python 給定一個(gè)正整數(shù)a和一個(gè)包含任意個(gè)正整數(shù)的 列表 b,求所有<=a 的加法組合7. android 如何實(shí)現(xiàn)如圖中的鍵盤上的公式及edittext的內(nèi)容展示呢8. java - 我在用Struts2上傳文件時(shí),報(bào)以下錯(cuò)誤怎么回事?9. php自學(xué)從哪里開始?10. 網(wǎng)站被黑,請(qǐng)教下大神,怎么對(duì)datebase.php內(nèi)容加密。
