本文摘要：在CSS中，通过灵活运用border属性（尤其是边框宽度、颜色和透明度），可以轻松实现正方形上方向的实心或空心三角形效果。首先，构造一个宽度和高度均为0的元素，然后设置左右两边的边框为透明，以仅显示底边或上边框，并调整其颜色及高度（如100px）来形成三角形。对于实心三角形，保留并填充底部边框；而对于空心三角形，则需添加一组反向边框，即设置顶部边框颜色，同时取消底部边框。这一方法充分利用了CSS边框特性，无需额外图形即可创建出精确且灵活的三角形样式。

CSS

CSS中达成四方形上方三角状是一个十分普遍的要求，而且也相当简单达成。下面是一个CSS达成四方形上三角状的代码实例：

.solid-triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #000;
}

上面的代码中，我们使用了border属性来达成四方形上三角状。具体来说，我们定义一个宽度为0、高度为0的盒子，并且同时定义两侧的边界为不透明度为零。这样就只剩下下边的边界了，我们设置其色彩为黑色，并且高度为100px，就构建出一个上方是三角状的四方形。

如果要达成空心的四方形上三角状，则可以再添加一组反向的边界，具体如下：

.hollow-triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #000;
border-bottom: none;
}

上面的代码中，我们定义上边界为黑色，高度为100px，同时定义下边的边界为none，这样就只有上边界是实心的了，构建出空心的四方形上三角状。

名词解释

作为当前文章的名词解释，仅对当前文章有效。

CSS：全称为Cascading Style Sheets，是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。在网页设计中，CSS与HTML配合使用，能够为网页元素定义布局、颜色、字体等视觉样式和版式属性，实现内容与样式的分离，提高代码复用性和维护性。

边框属性（border property）：在CSS中，边框属性是一个集合概念，包含多个子属性，如border-width（边框宽度）、border-style（边框样式）、border-color（边框颜色）等。通过设置这些子属性，可以控制元素四周的边框效果。在文章上下文中，开发者利用了边框属性中的颜色透明度、边框宽度以及取消部分边框来创建三角形形状。

透明边框（transparent border）：在CSS中，边框颜色可以设置为"transparent"，表示边框是透明的，即用户可以看到边框背后的背景或者内容。在正方形上三角形的实现过程中，左右两边的边框被设置为透明，使得这部分区域不会阻挡视线，从而只显示底边或上边框形成的三角形轮廓。

空心三角形：在图形学中，空心三角形是指内部没有填充颜色，只有边缘线条的三角形。在本文的CSS实现方案中，通过同时设置反向的边框并结合透明边框，仅保留一个方向的实色边框来模拟出空心三角形的效果。相较于实心三角形，空心三角形具有更轻盈、通透的视觉感受，在界面设计中常用来作为指示符或装饰元素。