border绘制三角形
(1)有边框的三角形
我们来写下带边框的三角形。
如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。
最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色;内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。
这里就涉及到一个绝对定位的问题,上、下、左、右四种方向的三角形相对于父级定位是不同的。首先我们来看下,当定位都为0(left:0px; top:0px;)时,会发生什么。
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!-- 向上的三角形 -->
< div class="triangle_border_up">
< span ></ span >
</ div >
<!-- 向下的三角形 -->
< div class="triangle_border_down">
< span ></ span >
</ div >
<!-- 向左的三角形 -->
< div class="triangle_border_left">
< span ></ span >
</ div >
<!-- 向右的三角形 -->
< div class="triangle_border_right">
< span ></ span >
</ div >
|
CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
/*向上*/
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_up span{
display:block;
width:0;
height:0;
border-width:0 28px 28px;
border-style:solid;
border-color:transparent transparent #fc0;/*透明 透明 黄*/
position:absolute;
top:0px;
left:0px;
}
/*向下*/
.triangle_border_down{
width:0;
height:0;
border-width:30px 30px 0;
border-style:solid;
border-color:#333 transparent transparent;/*灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_down span{
display:block;
width:0;
height:0;
border-width:28px 28px 0;
border-style:solid;
border-color:#fc0 transparent transparent;/*黄 透明 透明 */
position:absolute;
top:0px;
left:0px;
}
/*向左*/
.triangle_border_left{
width:0;
height:0;
border-width:30px 30px 30px 0;
border-style:solid;
border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_left span{
display:block;
width:0;
height:0;
border-width:28px 28px 28px 0;
border-style:solid;
border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
position:absolute;
top:0px;
left:0px;
}
/*向右*/
.triangle_border_right{
width:0;
height:0;
border-width:30px 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_right span{
display:block;
width:0;
height:0;
border-width:28px 0 28px 28px;
border-style:solid;
border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
position:absolute;
top:0px;
left:0px;
}
|
效果如图:
为什么不是我们预想的如下图的样子呢
原因是,我们看到的三角形是边,而不是真的具有内容的区域,请回忆下CSS的盒子模型的内容。
绝对定位(position:absolute),是根据相对定位父层内容的边界计算的。
再结合上篇我们最开始写的宽高为0的空div:
这个空的div,content的位置在中心,所以内部三角形是根据中心这个点来定位的。
为了看清楚一些,我们使用上一次的方法,给span增加一个阴影:
1
|
box-shadow:0 0 2px rgba(0,0,0,1);
|
效果如图:
这回我们明确的知道了,内部的三角形都是根据外部三角形实际内容的点来定位的,而非我们肉眼看到的三角形的边界定位。
HTML不变,CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
/*向上*/
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_up span{
display:block;
width:0;
height:0;
border-width:0 28px 28px;
border-style:solid;
border-color:transparent transparent #fc0;/*透明 透明 黄*/
position:absolute;
top:1px;
left:-28px;
}
/*向下*/
.triangle_border_down{
width:0;
height:0;
border-width:30px 30px 0;
border-style:solid;
border-color:#333 transparent transparent;/*灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_down span{
display:block;
width:0;
height:0;
border-width:28px 28px 0;
border-style:solid;
border-color:#fc0 transparent transparent;/*黄 透明 透明 */
position:absolute;
top:-29px;
left:-28px;
}
/*向左*/
.triangle_border_left{
width:0;
height:0;
border-width:30px 30px 30px 0;
border-style:solid;
border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_left span{
display:block;
width:0;
height:0;
border-width:28px 28px 28px 0;
border-style:solid;
border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
position:absolute;
top:-28px;
left:1px;
}
/*向右*/
.triangle_border_right{
width:0;
height:0;
border-width:30px 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_right span{
display:block;
width:0;
height:0;
border-width:28px 0 28px 28px;
border-style:solid;
border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
position:absolute;
top:-28px;
left:-29px;
|
效果如图:
进一步来写气泡框的三角形,如图所示:
HTML:
1
2
3
4
5
6
|
< div class="test_triangle_border">
< a href="#">三角形</ a >
< div class="popup">
< span >< em ></ em ></ span >纯CSS写带边框的三角形
</ div >
</ div >
|
CSS:
.test_triangle_border{
width : 200px ;
margin : 0 auto 20px ;
position : relative ;
}
.test_triangle_border a{
color : #333 ;
font-weight : bold ;
text-decoration : none ;
}
.test_triangle_border .popup{
width : 100px ;
background : #fc0 ;
padding : 10px 20px ;
color : #333 ;
border-radius: 4px ;
position : absolute ;
top : 30px ;
left : 30px ;
border : 1px solid #333 ;
}
.test_triangle_border .popup span{
display : block ;
width : 0 ;
height : 0 ;
border-width : 0 10px 10px ;
border-style : solid ;
border-color : transparent transparent #333 ;
position : absolute ;
top : -10px ;
left : 50% ; /* 三角形居中显示 */
margin-left : -10px ; /* 三角形居中显示 */
}
.test_triangle_border .popup em{
display : block ;
width : 0 ;
height : 0 ;
border-width : 0 10px 10px ;
border-style : solid ;
border-color : transparent transparent #fc0 ;
position : absolute ;
top : 1px ;
left : -10px ;
}
|
(2)东北、东南、西北、西南三角形的写法
继续,来写西北方(↖),东北方(↗),西南方(↙),东南方(↘)的三角形。
原理如图:
根据颜色的划分,每个可以有两种CSS来写,分别利用不同的边来创造所需三角形。
写一个nw(↖)的例子:
HTML:
1
|
< div class="triangle_border_nw"></ div >
|
CSS(1):
1
2
3
4
5
6
7
8
9
|
.triangle_border_nw{
width : 0 ;
height : 0 ;
border-width : 30px 30px 0 0 ;
border-style : solid ;
border-color : #6c6 transparent transparent transparent ;
margin : 40px auto ;
position : relative ;
}
|
CSS(2):
1
2
3
4
5
6
7
8
9
|
.triangle_border_nw{
width : 0 ;
height : 0 ;
border-width : 0 0 30px 30px ;
border-style : solid ;
border-color : transparent transparent transparent #6c6 ;
margin : 40px auto ;
position : relative ;
}
|
两种CSS效果均如图所示:
以上是利用CSS写三角形,晋级到
(1)有边框的三角形
(2)东北、东南、西北、西南三角形的写法
希望对大家有所帮助!( ̄▽ ̄”)
题外话:发现CSS的许多知识点都可以挖掘出一些深层的东西,很有意思~也因为有许多值得推敲的地方,所以写出来没有能做到绝对精简……
转自: http://crossjae.diandian.com/css/borde
转载于:https://www.cnblogs.com/sxz2008/p/7788212.html
border绘制三角形相关推荐
- CSS 如何用border绘制三角形、等腰梯形、直角梯形
CSS 如何用border绘制三角形.等腰梯形.直角梯形 border 有宽度后,四角交接处会产生斜线,可根据此原理绘制三角形.等腰梯形.直角梯形等图形. div {width: 50px;heigh ...
- html样式border倒三角写法,纯CSS - border绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS:N种使用CSS 绘制三角形的方法
目录 6种使用 CSS 实现三角形的技巧 1.使用 border 绘制三角形 2.使用 linear-gradient 绘制三角形 3.使用 conic-gradient 绘制三角形 4.transf ...
- CSS 绘制三角形的方法
目录 1.使用 border 绘制三角形 2.使用 linear-gradient 绘制三角形 3.使用 conic-gradient 绘制三角形 4.transform: rotate 配合 ove ...
- 使用border属性绘制三角形、五角星、心形
1. 绘制三角形 <p>直角三角形</p> <section class="triangle1"><style>#triangle1 ...
- css 绘制三角形_解释CSS形状:如何使用纯CSS绘制圆,三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
- CSS绘制三角形图标
CSS绘制三角形图标目录 1CSS绘制三解形图标原理 2 页面效果 3 HTML结构 4 CSS样式 1CSS绘制三解形图标原理 对内容容器进行相对定位,对内容容器的伪元素:before和:after ...
- CSS - Tooltip-arrow 绘制三角形
问题:纯CSS实现bubble的三角形部分 方法:使用border来绘制三角形:例如 1 .trangle { 2 width: 0; 3 border-color: transparent; 4 b ...
- CSS绘制三角形原理及应用
更多精彩内容可以访问我的博客Aelous-BLog 在从 PSD 到 HTML 页面的过程中,免不了要遇到一个问题:"这个小图标,可以用 CSS 效果实现,也可以切图下来,到底该怎么选择呢? ...
最新文章
- mysql 触发器 实例_mysql的触发器-含案例-含效果 | 时刻需
- 新手求助:大神们帮帮我,关于在ViewPage中添加GridView的问题
- 第二阶段_第二小节_C#调试
- HOOK -- IAT HOOK 本进程MessageBox
- 华为私有云的搭建方案_最简单的纯软件私有云搭建方案,我来教你
- 内存双通道不兼容举例以及解决方案.
- Windows 平台安装 MongoDB教程
- python 多继承的问题
- HTML中button怎么填充GIF,css3给按钮添加背景渐变动画
- java获取界面输入数字_通过JAVA设计 GUI 界面的计算器程序,用户可以通过鼠标依次输入参加计算的数值,进行加、减、乘、...
- MAC之U盘(制作U盘启动必须是在mac系统中)
- uni-app小程序实现图片上传和压缩
- Lightroom 2020年2月版新增功能
- simpleCaptcha语音验证码实现及其扩展
- 深圳IT外包公司名单汇总
- 教程 | 用安卓手机搭建 web 服务器(三)—— 内网穿透
- 基于STM32单片机的风力摆控制系统
- git与repo区别?
- imgburn dvd_如何使用ImgBurn刻录或刻录包含CD文本的CD(CD-R)
- 洛谷----P1123 取数游戏