html5 - css 這種六邊形的邊框怎么畫(huà)？
問(wèn)題描述
用一個(gè)p+css怎么實(shí)現(xiàn)？
還這種可以填充顏色的
求代碼！
問(wèn)題解答
回答1：<html> <head> <style> .sixedge{ height: 24px; width: 55px; position:relative; background-color: #FFF; border-top:1px solid green; border-bottom:1px solid green; margin-left:40%; } .sixedge:after{ content: ’’; position: absolute; background-color: transparent; top: 3px; right: -9px; width: 17px; height: 17px; transform: rotate(45deg); -ms-transform: rotate(45eg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); border-top: 1px solid green; border-right: 1px solid green; }.sixedge:before{ content: ’’; position: absolute; background-color: transparent; top: 3px; left: -9px; width: 17px; height: 17px; transform: rotate(45deg); -ms-transform: rotate(45eg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); border-bottom: 1px solid green; border-left: 1px solid green; } </style></head> <body> <p class='sixedge'>six</p> </body> </html>回答2：
最簡(jiǎn)單的是，拆分成左中右，三塊，2個(gè)三角形和一個(gè)矩形，然后合成，3個(gè)p
回答3：鏈接給你 自己畫(huà)吧
回答4：<p class='rectangle'>新手</p>.rectangle{
margin:0 auto;width:200px;height:51px;line-height:51px;text-align:center;position:relative;border-top:1px solid #00F;border-bottom:1px solid #00F;
}.rectangle:before{
content:'';position:absolute;top:7px;left:-19px;width:36px;border-top:1px solid #00F;height:36px;border-right:1px solid #00F;transform:rotate(-135deg);
}.rectangle:after{
content:'';position:absolute;top:7px;right:-19px;width:36px;border-top:1px solid #00F;height:36px;border-right:1px solid #00F;transform:rotate(45deg);
}
回答5：@machenchi0207 六邊形外框
借用 @machenchi0207 的代碼
回答6：CSS3漸變實(shí)現(xiàn)切角效果
詳情見(jiàn)《css揭秘》第三章的切角效果
就是利用偽類 然后給大小為0， 邊框加上像素就是了，多試一下
相關(guān)文章：
1. html - css 文件內(nèi)，有的樣式?jīng)]調(diào)用， 有沒(méi)有工具刪除這部分沒(méi)調(diào)用的內(nèi)容？2. javascript - Jquery click()事件的禁用3. javascript - node引入文件路徑中的@是什么意思?4. javascript - easyui textbox綁定onchange事件不能獲取最新的文本框的值5. java - 圖片上傳后，立即訪問(wèn)出現(xiàn)404，重新部署項(xiàng)目后正常可以訪問(wèn)6. css - chrome瀏覽器input記錄上次cookie信息后，有個(gè)黃色背景~如何去除！7. 單元格本來(lái)是寫(xiě)文字的地方插入背景圖片，這種方式正確嗎？8. javascript - Angular利用 broadcast和 on實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)并且傳遞數(shù)據(jù) 但是跳轉(zhuǎn)后收不到數(shù)據(jù)9. PHP類中的$this10. javascript - 請(qǐng)教如何獲取百度貼吧新增的兩個(gè)加密參數(shù)
網(wǎng)公網(wǎng)安備