当前位置： 文江博客话题详情

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

发布于 2022-09-04 15:21:46 字数 328 浏览 15 评论 0

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

求代码！

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（7）

风启觞 2022-09-11 15:21:46
    <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>
回复
枫以 2022-09-11 15:21:46

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

回复
弥枳 2022-09-11 15:21:46

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

}

回复
め七分饶幸 2022-09-11 15:21:46

@machenchi0207 六边形外框

借用 @machenchi0207 的代码

回复
疾风者 2022-09-11 15:21:46

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

回复
云之铃。 2022-09-11 15:21:46

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

回复
~没有更多了~

关于作者

等风也等你

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

謌踐踏愛綪

文章 0 评论 0

开始看清了

文章 0 评论 0

高速公鹿

文章 0 评论 0

alipaysp_PLnULTzf66

文章 0 评论 0

热情消退

文章 0 评论 0

白色月光

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文