html5 - css 這種六邊形的邊框怎么畫？
問題描述
用一個p+css怎么實現？
還這種可以填充顏色的
求代碼！
問題解答
回答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：
最簡單的是，拆分成左中右，三塊，2個三角形和一個矩形，然后合成，3個p
回答3：鏈接給你 自己畫吧
回答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漸變實現切角效果
詳情見《css揭秘》第三章的切角效果
就是利用偽類 然后給大小為0， 邊框加上像素就是了，多試一下
相關文章：
1. javascript - 移動端自適應2. python3.x - c++調用python33. 前端 - 關于img父容器的高度會比img的高度多幾像素的問題？4. java - 根據月份查詢多個表里的內容怎么實現好？5. atom開始輸入！然后按tab只有空格出現沒有html格式出現6. javascript - 在 model里定義的 引用表模型時，model為undefined。7. css3 - 沒明白盒子的height隨width的變化這段css是怎樣實現的?8. css3 - 這個右下角折角用css怎么畫出來？9. php工具中的mysql還是5.1以下的，請問如何才能升級到5.1以上？10. apache - 想把之前寫的單機版 windows 軟件改成網絡版，讓每個用戶可以注冊并登錄。類似 qq 的登陸，怎么架設服務器呢？
網公網安備