这些只是我的笔记，真想学习的话建议看视频，网上视频讲的很好的。
一、理解思路
- 写一个div，设置宽、高。把四个边给上不同的颜色，会发现 it 的边不是长方形，而是一个梯形
- 正方形的角是由两条边,斜线对角平分,的
- 把宽度调小，梯形的短边会变短，当宽度为0时，两侧的两会贴上，上下会变成两个三角形。
- 把高度也设置为0，就成了四个三角形。
这个小正方形是由四个边框组成的。div宽高为0，硬生生的由边框撑起来。
注意！！！宽度必须设置为0，要不然宽度默认是父元素的100%。高度可以不管。
额，这水印怎么去掉？我已经取消掉水印选项了，怎么还有呀？啊啊啊……
二、快速制作一个三角形
- 写一个div，给div的宽度设置为0
- 给div添加边框，宽度设置大些，每条边的颜色设置为不同的颜色
- 留下想要的边，把其余三条边的颜色设置为透明 或者 与背景色相同
<style>
div {
width: 0px; /* 宽度设置为0 */
border-top: 100px solid transparent; /* 三条边的颜色设置为透明的 */
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 100px solid blue; /* 只显示的一条边的颜色 */
}
</style>
<body>
<div></div>
</body>
三、边框的宽度与高度
注意：
如果只设置一个边框，它只有本身的高度，但是没有宽度。看不到任何效果。
一个边框的宽度由它旁边的高度决定。
直白点就是说：我只有高度，没有宽度，左边可以给我提供一半宽度，右边也可以给我提供一半宽度。
所以至少有两条边框。
- 第一张图四个边框都存在
- 第二张图，没有上边框。左右两侧边框只有本身高度和底边框提供的一半宽度。
- 第三张图，只有左侧和底部的边框，它们分别为对方提供了宽度。
总结说就是：自己只有高度，宽度由旁边的好兄弟提供。φ(*￣0￣)
四、直角、锐角、钝角
1、直角三角形、等腰直角
1. 第一张图用来对比查看
2. 第二张，只给了下面边框颜色，三个都是透明色。
3. 第三张，把黄、蓝两个三角形组合成了一个大三角形，两个边框颜色一样。
4. 第四张，只有左、下两个边框，也就是第一张图框起来的部分。
<style>
div {
width: 0px; /* 宽度设置为0 */
background-color: rgb(122, 126, 126); /* 背景色，方便对比 */
/* border-top: 100px solid transparent; */ /* 三条边的颜色设置为透明的 */
/* border-right: 100px solid transparent; */
border-left: 100px solid transparent;
border-bottom: 100px solid blue;/* 只显示的一条边的颜色 */
}
</style>
可以把注释的代码打开，就有这几行代码。来回调调看效果，要先想好效果再调。
<body>
<div></div>
</body>
2、锐角三角形
只要把底边的数值调大，三角形变高，自然就变成锐角了。
3、钝角三角形
同理，把底边的数值调小。
好像还少了等边，等边就得计算了吧。毕竟斜边不一定与底边相等。知道了再更新。
1449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
