用css创建一个三角形的原理
用css创建一个三角形的原理就是控制其边框颜色的显示。
具体请看一下内容：
1、首先我们将一个div的宽高设置为零，然后设置其边框宽度为50px，边框类型为：soild；四条边的边框颜色设置为黄、蓝、红、绿。
代码如下：
.box{
width: 0;
height: 0;
border: 30px solid;
border-color: yellow blue red green ;
}
打开浏览器看实现的效果：
由图可知：border-color的四个值与该div的边的对应关系为：上、右、下、左，而且各自渲染出来的都是一个三角形的效果，所以我们只要将四个值中的任意三个值设为透明就可以得到一个三角形。
即如下代码：
<style>
.box{
width: 0;
height: 0;
border: 30px solid;
border-color: transparent transparent red transparent ;
}
</style>
<body>
<div class="box"></div>
</body>
可得如下效果：
记录完毕！
/*
author:Amos
date:2019/11/22 19:40
*/
扫一扫
730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
