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揭秘》第三章的切角效果
就是利用偽類(lèi) 然后給大小為0, 邊框加上像素就是了,多試一下
相關(guān)文章:
1. python - scrapy url去重2. Python從URL中提取域名3. node.js - 微信小程序websocket連接問(wèn)題4. python執(zhí)行cmd命令,怎么讓他執(zhí)行類(lèi)似Ctrl+C效果將其結(jié)束命令?5. 實(shí)現(xiàn)bing搜索工具urlAPI提交6. Python中使用超長(zhǎng)的List導(dǎo)致內(nèi)存占用過(guò)大7. python - Django有哪些成功項(xiàng)目?8. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)9. 數(shù)據(jù)庫(kù) - Mysql的存儲(chǔ)過(guò)程真的是個(gè)坑!求助下面的存儲(chǔ)過(guò)程哪里錯(cuò)啦,實(shí)在是找不到哪里的問(wèn)題了。10. 鏈接圖片時(shí),鏈接不成功
