纯css制做带3角border篇(适配全部访问器)

日期:2021-01-20 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

之前写过1篇纯CSS制做带3角的边框,那篇文章内容是用HTML独特标识符来制做3角的,今日详细介绍下,怎样用 border 来制做3角。

html 编码以下:

拷贝编码
编码以下:

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

css 编码以下:

拷贝编码
编码以下:

.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
_border-left: 5px solid white;
_border-right: 5px solid white;
border-bottom: 5px solid black;
overflow:hidden;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
_border-left: 20px solid white;
_border-right: 20px solid white;
border-top: 20px solid #f00;
overflow:hidden;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
_border-top: 60px solid white;
_border-bottom: 60px solid white;
border-left: 60px solid green;
overflow:hidden;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
_border-top: 10px solid white;
_border-bottom: 10px solid white;
border-right:10px solid blue;
overflow:hidden;
}

实际效果图以下:

检测访问器:chrome,firefox,ie8,ie7,ie6,safari,opera

PS:

1、原文并沒有适配 ie6 访问器,因此我改了下,如今的版本号早已能够适配全部访问器了。

2、相对用 border 来做3角,我更为喜爱用 html 独特标识符来制做3角。

上一篇:body情况照片拉伸另类完成 返回下一篇:没有了