css三角形滴原理肿么用 css 画一个如下图滴三角形相信很多同学都知道 下面这段代码阔以实现 triangle up nbsp nbsp nbsp nbsp width 0 nbsp nbsp nbsp nbsp height 0 nbsp nbsp nbsp nbsp border left 50pxsolidtr
肿么用css画一个如下图滴三角形

相信很多同学都知道,下面这段代码阔以实现
|
|
#triangle-up
{
width
:
0
;
height
:
0
;
border-left
:
50px
solid
transparent
;
border-right
:
50px
solid
transparent
;
border-bottom
:
100px
solid
red
;
}
|
但素,大部分人不知道为虾米上面这段代码可以画出一个三角形
下面偶们图文并茂的来看一下
首先呢,下面是一个盒模型,padding和margin都视为0,border假设是10px

首先,我们把border-top设为0,得到下图

然后吧width设为0,中间内容的宽度就没了,只剩高,如下图

然后再把height设为0

然后把左右的border设为transparent,得到最终的三角形

微博上看到有人做了个gif图,形象的展示的三角形的原理

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。
发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/221480.html原文链接:https://javaforall.net