html5 - css 这种六边形的边框怎么画？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - css 这种六边形的边框怎么画？

迷茫 2017-04-17 14:58:52

[HTML讨论组]

900

用一个p+css怎么实现？
还这种可以填充颜色的

求代码！

迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(7)

天蓬老师2017-04-17 15:00:52 7楼

    <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>

赞 +0

添加回复

天蓬老师2017-04-17 15:00:52 6楼

最简单的是，拆分成左中右，三块，2个三角形和一个矩形，然后合成，3个p

赞 +0

添加回复

巴扎黑2017-04-17 15:00:52 5楼

链接给你自己画吧

赞 +0

添加回复

高洛峰2017-04-17 15:00:52 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);

}

赞 +0

添加回复