美文网首页让前端飞
如何用css绘制三角形?

如何用css绘制三角形?

作者: 伊泽瑞尔灬 | 来源:发表于2020-05-05 22:04 被阅读0次

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

<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;
            }
        }
    }
上三角

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

#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

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


线上体验地址
所有的源码都可以在我的仓库地址:下载
个人公众号:

长按保存关注

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

相关文章

  • css绘制三角形和对号

    CSS绘制三角形 div css 效果 CSS绘制对号 div css 效果

  • 绘制对话框

    Time: 20200131 三角形的绘制 HTML CSS样式 对话框的绘制 HTML CSS样式 显示效果 END.

  • CSS-绘制各种基本图形

    最近被问到如何用CSS绘制一个圆,解决这个问题的同时引发了我对CSS绘制图形的兴趣。今天汇总一下CSS绘制的各种基...

  • css绘图基本图形

    一、css绘制三角形(一)基础css.xiasanjiao{width:0;height:0;overflow:h...

  • 纯css绘制三角形

    利用css的border属性可以方便的绘制出三角形;

  • 如何用css画三角形&太极

    一、如何用css画一个三角形 搜索学习资源:Google >>css tricks shape >> 画一个如下图...

  • 如何用css绘制三角形?

    首先,我们知道用边框实现一个三角形很简单,直接上代码上图。 可以看到实现一个三角形很简单,但是本文会从原理上来讲解...

  • 【基础】在css中绘制三角形及相关应用

    简言 本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景。利...

  • css技巧收集 2018-07-24

    一、css绘制三角形 {width: 0;height: 0;border-top: 50px solid tr...

  • 三角形绘制方法

    CSS 三角形绘制方法主要是利用:transparent(透明) transparent 用来指定全透明色彩。tr...

网友评论

    本文标题:如何用css绘制三角形?

    本文链接:https://www.haomeiwen.com/subject/hazvghtx.html