以前我知道一种方法:它的机制是：比如div，我设置它的宽高为100px,然后设置border:50px solid transparent;即设置4个向内延伸的透明边框；
再根据需要三角形的朝向比如朝下就设置border-top:red;将需要的边框上色，这样就得到红色的三角形。
但是对于图中
以下代码：.m-UIFAB-phone .triangle-1 {
border-right: 200px solid transparent; border-top: 200px solid #aaa; height: 0; left: 0; position: absolute; top: 0; width: 0;
}
是生成左上角灰色等边三角形的css。
但是我不理解它生成的机制。设置在宽高为0情况下，设置border-top和border-right是如何起作用的。对于box-sizing为border-box和content-box这样的css相同吗？最好可以画图表示一下三角形的形成过程，解释下 border-right: 200px solid transparent;和 border-top: 200px solid #aaa;各自的作用谢谢。
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1
1562
收藏
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...