首先,我们知道用边框实现一个三角形很简单,直接上代码上图。
<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; }
.right { border-left: 50px solid transparent; border-top: 50px solid transparent; border-right: 50px solid red; border-bottom: 50px solid red; }
.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; }
可以看到,理解了边框实现三角形的原理,就能绘制各式各样的图形了。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于