首先,我们知道用边框实现一个三角形很简单,直接上代码上图。
<div class="content">
<div class="up"></div>
</div>
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划)
.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;