纯CSS写三角形-border法

最新推荐文章于 2022-08-22 19:27:15 发布
最新推荐文章于 2022-08-22 19:27:15 发布
阅读量454 收藏
点赞数
分类专栏： css 文章标签： 纯CSS写三角形-border法

纯CSS写三角形-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/border02

happy_叶子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS写带边框的三角形
11-26
纯CSS写带边框的三角形
CSS绘制三角形的实现代码(border法)
09-22
主要介绍了CSS绘制三角形的实现代码(border法)的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS 三角——带边框的三角
qq_64133626的博客
08-20 4765
值得注意的是，right 值右移的距离值是 border 的两倍，要想使三角的边框和 div 边框一致，需要使三角组合得到的边框像素和 div border 像素一致，如果 div border 是1px，那么大的三角形和小的三角形边框差就需要为1px，大三角移动的距离和小三角移动的距离差则为2px，多运行几次代码即可理解。可以使用伪元素 before 和 after来做，其效果就相当于在标签的内部放置一个最前或者最后的标签，添加的标签可以继承父元素的属性，那么通过伪元素就可以组装出带边框的小三角。
css画带边框三角形,纯CSS画三角形（带边框）
weixin_39639518的博客
08-04 509
实例一：Title.find-div-body{position: relative;top:30px;right:0px;width:400px;height:200px;padding:8px;background-color: #FFFFFF;border: #cccccc solid 1px;border-radius: 3px;}.find-div-body:before{box-siz...
【CSS】带边框的三角形
weixin_39415598的博客
11-27 149
34840-106.jpg image.png 思路是将2个三角形叠加起来，外层的三角形稍微大一些。 思路和《【CSS】内圆角》这个笔记的 “方法一” 类似。 http://www.jianshu.com/p/6e61856cf143 这个笔记最后会补充《【CSS】画三角形》这个笔记里记漏的一点。 http://www.jians...
用CSS代码绘制三角形 纯CSS绘制三角形的代码
12-30
1、新建一个元素，随便... border-color:#f00 #000 #f0f #00f;在FF下面显示效果如下：出现4个三角形合并成一个正方形。到这里就很清晰了，只要把想要的保留，其它的设置为透明就可以达到三角形的效果，那么：border:5
纯CSS绘制三角形箭头效果
01-19
使用纯CSS，你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头！ CSS代码 复制代码代码如下:/* create an arrow that points up */div.arrow-up { width: 0; height: 0; border-left: 5px solid ...
纯CSS绘制三角形箭头图案技术解析
01-21
使用纯CSS，你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头！ CSS代码 CSS Code复制内容到剪贴板 /* create an arrow that points up */  div.arrow-up { width: 0; 
纯css制作带三角的边框(附效果图)
12-13
首先附上效果图： 以上的效果完全是用 css 来实现的，那么是怎么实现的呢？ 我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。 通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。 复制代码代码如下:<!DOCTYPE HTML><html lang=”en-US”><head> <meta charset=”UTF-8″> <title>字符制作三角边框</title> <style type=”text/css”> *{margin:0;padding:0;} body{font-fa
CSS边框实现三角形
weixin_69220039的博客
08-22 437
CSS边框实现三角形
CSS利用边框实现三角形详解(上)
m0_57371966的博客
01-02 6150
利用CSS边框实现三角形，以及进阶技巧
HTML+CSS-三角形的边框
cai_niao5623的博客
11-04 1182
首先用css制作一个三角形 <style> .triangle { width: 0; height: 0; border-top: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid chocolate; border-left: 30px solid transp
纯CSS画三角形（带边框）
热门推荐
qq_095的博客
10-09 1万+
实例一： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;style&gt; .find-d
css如何画有边框的三角形
qq_38888512的博客
05-27 1331
vue的logo就可以看作是一个有边框的三角形。 以画一个vue的logo为例子: <div> <div id="vue-logo"> <div class="green"> <div class="gray"> <div class="white"></div> </div&gt
css实现带小三角形的边框
布偶猫爸爸的博客
01-19 6531
主要方法是使用伪元素before和after，之前已经总结过伪元素before、after用法，它们效果相当于在标签的内部放置一个最前或者最后的标签，添加的标签同样的能够继承父元素的属性，那么通过伪元素就可以组装拼出对话框的小三角； 原理图： 第一步： 第二步： 设定浮动，让before和after三角形重叠： 第三步： 通过top -px像素把三角形移到div边框上 ...
用css画一个倒三角
aweo960421621的博客
09-04 1013
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
css边框三角形
motor_tang的博客
03-12 116
css边框三角形 // html <div class="content"> <div class="top"></div> <div class="right"></div> <div class="bottom"></div> <div class="left"></div> </div> // css .content{ paddin
帮写出css绘制三角形的代码
最新发布
03-31
- 以上代码只能绘制等腰直角三角形，如果想绘制其他形状的三角形，需要调整 `border-left`、`border-right` 和 `border-bottom` 的值。 - 以上代码中的 `.triangle` 是一个类选择器，你可以将其应用到 HTML 元素中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值