您现在的位置是：网站首页> 编程资料编程资料
CSS中使用border来创建三角形的基本方法讲解_CSS教程_CSS_网页制作_
2023-11-11
263人已围观
简介 这篇文章主要介绍了CSS中使用border来创建三角形的基本方法讲解,文中同时还附带了对HTML5 Canvas和SVG三角形的介绍,需要的朋友可以参考下
比较简单实用的还是使用border来创建三角形，今天主要研究这个的实现
将边框分别设置为红/黄/蓝/绿
CSS Code复制内容到剪贴板
- .triangle {
- height: 0;
- width: 0;
- overflow: hidden;
- font-size: 0;
- line-height: 0;
- border-color: #ff0000 #ffff00 #0000ff #008000;
- border-style: solid;
- border-width: 40px 40px 40px 40px;
- }
效果如下：
四个三角形合成一个正方形，大小为80x80，如果我们只想保留其中某个三角形的话，将其它的设置为透明即可，比如(以下css未改变部分与上面相同)
CSS Code复制内容到剪贴板
- .triangle {
- border-color: #ff0000 transparent transparent transparent;
- border-width: 40px 40px 40px 40px;
- }
效果：
IE6不支持transparent，所以不会透明而会显示难看的黑色，不过也有解决方法：将透明的部分对应的border-style设为dashed即可
CSS Code复制内容到剪贴板
- .triangle {
- border-color: #ff0000 transparent transparent transparent;
- border-style: solid dashed dashed dashed;
- border-width: 40px 40px 40px 40px;
- }
正方形按对角线平分为两个三角形的情况
CSS Code复制内容到剪贴板
- .triangle {
- border-color: #ff0000 #ffff00 #0000ff #008000;
- border-style: solid;
- border-width: 0 0 40px 40px;
- }
CSS Code复制内容到剪贴板
- .triangle {
- border-color: #ff0000 #ffff00 #0000ff #008000;
- border-style: solid;
- border-width: 0 40px 40px 0;
- }
需要指出的是，此时正方形的大小为40x40
如果将border-width的某一边设为0又会怎么样呢？也算是两种情况
CSS Code复制内容到剪贴板
- .triangle {
- border-color: #ff0000 #ffff00 #0000ff #008000;
- border-style: solid;
- border-width: 40px 40px 0 40px;
- }
CSS Code复制内容到剪贴板
- .triangle {
- border-color: #ff0000 #ffff00 #0000ff #008000;
- border-style: solid;
- border-width: 40px 40px 40px 0;
- }
结果是长方形，其中一边为80一边为40。宽度被设为0的边框对应方向的边框会形成较大的三角形，且长度加倍
segmentfault的"采纳"的显示其实
相关内容
- 刀塔传奇新版英雄排行榜 死亡先知仅列第七_手机游戏_游戏攻略_
- 迷你西游新手卡牌搭配推荐 简单易用的取经组合_手机游戏_游戏攻略_
- 我叫MT黑龙极限伤害及阵容全面解析 伤害可达4.5亿_手机游戏_游戏攻略_
- 我叫MT四暗影竞技场实战视频攻略 完败乌鸦小队_手机游戏_游戏攻略_
- 刀塔传奇新版内容抢先曝光 新玩法新英雄_手机游戏_游戏攻略_
- 我叫MT3.5版竞技场攻略分享 竞技场阵容使用心得_手机游戏_游戏攻略_
- 天天炫斗艾尔布鲁完美连击攻略_手机游戏_游戏攻略_
- 我叫MT3.6版符石获取与消耗情况全面解析_手机游戏_游戏攻略_
- 锁链战记汉化效果一览_手机游戏_游戏攻略_
- 迷你西游关于新卡牌铁扇公主解析_手机游戏_游戏攻略_
