css：用border实现实心三角形、空心三角形、箭头

2024-07-15 07:53| 来源: 网络整理| 查看: 265

1.border边框原理

将border属性的值写大点，我们就可以观察到，其实一个盒子的border其实是由三角形组成的。

.triangle{ width: 0; height: 0; /*边框大小*/ border: 100px solid; /*边框颜色*/ border-color: red orange yellow green; }

效果图：

2.不同朝向的等腰直角三角形

利用transparent属性来设置边框颜色透明:

(1)方向向下的三角形：

.triangle{ width: 0; height: 0; /*边框大小、样式、颜色透明*/ border:100px solid transparent; /*上边框颜色*/ border-top-color: red; }

效果图：（2）方向向右的三角形

.triangle{ width: 0; height: 0; border:100px solid transparent; border-left-color: orange; }

效果图：（3）方向向上的三角形：

.triangle{ width: 0; height: 0; border:100px solid transparent; border-bottom-color: green; }

效果图：（4）方向向左的三角形：

.triangle{ width: 0;

【本文地址】

今日新闻