为了账号安全,请及时绑定邮箱和手机立即绑定

如何用css绘制三角形?

标签:
CSS3

首先,我们知道用边框实现一个三角形很简单,直接上代码上图。

<div class="content">
       <div class="up"></div>
</div>
.triangleTest {
        .content div {
            width: 0;
            height: 0;
            &.up {
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                border-bottom: 100px solid red;
                border-top: 0;
            }
        }
    }

上三角

可以看到用样式的border-width来实现一个三角形很简单,但是本文会从原理上来讲解,为什么会这样展示。

#box{
            width:200px;
            height:200px;
            background:yellow;
            border-top: 80px solid red;
            border-right:80px solid black;
            border-bottom:80px solid green;
            border-left:80px solid blue;
        }

原理

可以看到,盒子宽高都为200px,边框都是80px,由于边框颜色不同,可以很明显的看出是以梯形的方式向内容区域(黄色区域),覆盖。如果长或者宽小于最大边框时,则内容区域不可见(黄色区域),就是说当盒子长宽小于160px(80 + 80)那么表现出来就是4个三角形。

三角形
我们再回到第一个例子,就很好解释为啥是个三角形了,因为左边和右边边框都是透明色,看不到,所以就只能看到底边框形成的一个向上的三角形。
根据上面的原理,我们能实现很多种三角形,梯形。

.left {
                border-left: 50px solid red;
                border-top: 50px solid red;
                border-right: 50px solid transparent;
                border-bottom: 50px solid transparent;
            }

4.png

.right {
                border-left: 50px solid transparent;
                border-top: 50px solid transparent;
                border-right: 50px solid red;
                border-bottom: 50px solid red;
            }

5.png

.bottom-left {
                width: 120px;
                height: 120px;
                background-color: transparent;
                border-left: 50px solid transparent;
                border-top: 50px solid transparent;
                border-right: 50px solid transparent;
                border-bottom: 50px solid red;
            }

6.png

可以看到,理解了边框实现三角形的原理,就能绘制各式各样的图形了。


线上体验地址
所有的源码都可以在我的仓库地址:下载
个人博客:访问

学习如逆水行舟,不进则退,前端技术飞速发展,如果每天不坚持学习,就会跟不上,我会陪着大家,每天坚持推送博文,跟大家一同进步,希望大家能关注我,第一时间收到最新文章。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消