问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
flycumt
    245217077

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

    求代码！

    html5css边框属性
    阅读 17.1k
    8 个回答
    得票最新
    头像
    machenchi0207
      1.2k42636
          <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>
      头像
      Joker
        6412

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

        头像
        四月的桜和猫
          3.3k53055
          头像
          游泳的鱼
            981216

            <div class="rectangle">
            新手
            </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);

            }

            头像
            北堂棣
              6.6k94268
              头像
              趁你还年轻
                4.1k31937

                CSS3渐变实现切角效果
                Image
                详情见《css揭秘》第三章的切角效果

                头像
                naice
                  2k22239

                  就是利用伪类 然后给大小为0， 边框加上像素就是了，多试一下

                  头像
                  隔壁大颜子
                    5
                    新手上路，请多包涵
                    .box1{
  width:200px;
  height:50px;
  background:red;
  color:white;
  text-align:center;
  line-height:50px;
  -webkit-clip-path:polygon(20px 0,180px 0,200px 10px,200px 40px,180px 50px,20px 50px,0 40px,0 10px);
  margin-bottom:10px;
}

                    绿色的在四个角加上渐变，道理是一样的

                    撰写回答
                    你尚未登录，登录后可以
                    • 和开发者交流问题的细节
                    • 关注并接收问题和回答的更新提醒
                    • 参与内容的编辑和改进，让解决方法与时俱进
                    推荐问题