css 多边形边框(八边形)

方法一

适用于宽度固定

<div className="block"><div className="center"></div></div>

.block {box-sizing: border-box;position: relative;width: 400px;height: 45px;overflow: hidden;.center {box-sizing: border-box;position: absolute;width: 100%;height: 17px;content: " ";top: 17px;left: 0;border-left: 1px solid red;border-right: 1px solid red;&:before {position: absolute;left: 5%;top: -8.5px;box-sizing: border-box;content: " ";width: 90%;height: 12px;transform: perspective(1em)scale(1.1, 1.3) rotateX(5deg);border: 1px solid red;border-bottom: none;}&:after {position: absolute;bottom: -8.5px;left: 5%;content: " ";width: 90%;height: 12px;transform: perspective(1em)scale(1.1, 1.3) rotateX(-5deg);border: 1px solid red;border-top: none;}}
}

方法二

宽高可自适应, 但兼容性较差


.block{width: 300px;height: 50px;clip-path: polygon(12px 0, calc(100% - 12px) 0,100% 12px, 100% calc(100% - 12px),calc(100% - 12px) 100%, 12px 100%,0 calc(100% - 12px), 0 12px);background: linear-gradient(-45deg, red 8px, transparent 0) bottom right,linear-gradient(45deg, red  8px, transparent 0) bottom left,linear-gradient(135deg, red  8px, transparent 0) top left,linear-gradient(-135deg, red  8px, transparent 0) top right;background-size: 50% 51%;background-repeat: no-repeat;border: solid 1px red;}

方法三

八边形背景图切分达到宽高自适应的效果(不拉伸背景图)

.block{width: 300px;box-sizing: border-box;border: 15px solid;-webkit-border-image: url(util/images/input_bg.png) 15 round;border-image: url(util/images/input_bg.png) 15 round;position: relative;display: inline-block;
}

css 多边形边框(八边形)相关推荐

css多边形制作简历小标题二级标题
使用css边框绘制加 transform: skewX(45deg);属性实现 <!DOCTYPE html> <html><head><meta chars ...
html中如何让字段闪烁,Javascript结合CSS实现边框闪烁提示
Javascript结合CSS实现边框闪烁提示2017-09-01 23:12 当我们提交表单的时候,有些字段是必填的. 但是如果用户提交的时候偏偏不填写就提交,这时我们一般都会弹出一个框来提醒用户. ...
css用边框实现圆角矩形
今天要做一个圆角矩形的按钮,于是直接找圆角矩形的css实现方式,搞了半天,虽然也实现效果了,但是很复杂,需要用很多代码,后来突然想到以前做过的一个边框效果,也是圆角矩形,于是找了出来,发现这种办法相当 ...
css 有关边框的属性_边框样式（CSS属性）
css 有关边框的属性句法 (Syntax) border-style边框样式 : { { : {{ none | 无 | hidden | 隐藏 dotted | 点缀 | dashed | 虚线 ...
html中不显示竖线边框代码,DIV用CSS定义边框为实线，但为什么预览的时候不显示。...
DIV用CSS定义边框为实线,但为什么预览的时候不显示.以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! DIV用CSS定 ...
CSS盒子边框(border)样式综合样式
CSS盒子边框(border) 语法: border : border-width ll border-style ll border-color 边框的样式: none:没有边框即忽略所有边框的宽度 ...
css里外边框与内边框_基本CSS边框
css里外边框与内边框 Every HTML element can be provided with a basic border via CSS, using one of 10 styles: ...
html边框阴影咋设置,css阴影边框怎么设置
css阴影边框的设置方法:首先新建一个html文件:然后在这个html文件上创建两个[ ]用来设置阴影边框:最后这两个div添加样式类为in.out. 本教程操作环境:windows10系统.css3 ...
php表格所有边框实线,css表格怎么添加边框样式？css表格边框样式总结（附完整实例）...
本篇文章主要讲述的就是关于css表格添加边框样式,这里还有关于css表格边框样式的总结,还有css表格边框的完整实例.接下来就让我们一起来看这篇文章吧首先我们先看看如何利用css来给表格添加边框: ...

css 多边形边框(八边形)

方法一

方法二

方法三

css 多边形边框(八边形)相关推荐

最新文章

热门文章