css实现只有三角形

CSS实现只有三角形可以用来美化网页，下面是实现三角形的代码：

.triangle {
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-top:20px solid red;
  width:0;
  height:0;
}

这段CSS代码中，首先设置了一个类名为triangle的样式。接下来通过使用border属性来实现只有三角形的效果。

两个border-left和border-right都被设置为20像素宽度的空，用于创建一个三角形的两条边。 border-top则被设置为20像素的红色边框，用于创建三角形的底边。

此外，为了避免三角形因为包含文本或其他元素而被挤压变形，需要设置三角形的宽度和高度为0像素。

最终，HTML标记中使用triangle类名将三角形样式应用到元素上：

<div class="triangle"></div>

上述代码将在网页上创建一个红色的三角形。

除了垂直三角形之外，也可以创建水平三角形。下面是一个水平三角形的例子：

.triangle-horizontal {
  border-top:30px solid transparent;
  border-bottom:30px solid transparent;
  border-left:30px solid blue;
  height:0;
  width:0;
}

HTML中使用triangle-horizontal类名将水平三角形应用到元素上：

<div class="triangle-horizontal"></div>

上述代码将在网页上创建一个蓝色的水平三角形。