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

用一个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>

</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，边框加上像素就是了，多试一下

实现css六边形边框,css 这种六边形的边框怎么画？相关推荐

从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...
html th不显示下边框,css怎么设置不显示table的边框？
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力. css可以通过border属性设置table的边框,可以通过设置border属性 ...
[css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
border属性 php,如何通过CSS的border属性为图片设置边框效果
如何为通过css为图片设置一个边框呢,HTML中是通过标记的border属性值,给图片添加边框的,css中是通过border属性,为图片设置各式各样的边框样式,border-style定义边框的样式, ...
html怎么添加5px高的线,css给div添加0.5px的边框
具体代码实现如下: border div{ position: relative; width: 100%; background-color: #fff; } div:before{ content ...
用CSS添加鼠标样式-箭头、小手、十字 CSS实现虚线之dotted边框-点虚线、dashed边框-破折号虚线
用CSS添加鼠标样式-箭头.小手.十字- & CSS实现虚线之dotted边框-点虚线.dashed边框-破折号虚线 //小手样式 cursor:pointer; cursor其他取值 aut ...
css常用样式（文字样式、边框样式、背景样式）
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
如何在HTML网页里添加CSS边框,css如何设置边框？
在CSS中,可以设置border属性来设置边框.border是一个简写属性,可以在一个声明设置所有的边框属性.可以按照border-width.border-style.border-color顺序设 ...
html边框波浪,波浪的边框css怎么实现
css实现波浪边框的方法:首先新建一个div,并给它一个类名:然后设置一个背景颜色,并将div设为白色:接着使用伪元素before进行设置,并插入有渐变颜色的形状:最后加上尺寸进行图形的分割,并增加三 ...
html中给div或者span加边框css样式
目录 1.边框样式需求 2.CSS代码说明 (1)样式写法 (2)CSS代码示例和结果 1.边框样式需求需要给一个div或者span快增加边框的效果 2.CSS代码说明 (1)样式写法在样式中增加 ...

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

实现css六边形边框,css 这种六边形的边框怎么画？相关推荐

最新文章

热门文章