用一个div+css怎么实现?
还这种可以填充颜色的
求代码!
<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>
<div class="sixedge">six</div>
</body>
</html>
最简单的是,拆分成左中右,三块,2个三角形和一个矩形,然后合成,3个div
链接给你 自己画吧
新手
.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);
}
@machenchi0207 六边形外框
借用 @machenchi0207 的代码
CSS3渐变实现切角效果
详情见《css揭秘》第三章的切角效果
就是利用伪类 然后给大小为0, 边框加上像素就是了,多试一下