CSS写一个三角形，只要边框不要背景色

可以使用CSS的border属性和transparent关键字来实现只有边框没有背景色的三角形，具体代码如下：

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 50px;
  border-color: transparent transparent #000 transparent;
}

解释一下：

- width和height设置为0，表示三角形没有实际的宽度和高度，只有边框；
- border-style设置为solid，表示边框是实线；
- border-width分别设置为0、50px、50px、50px，表示上、右、下、左四个方向的边框宽度；
- border-color分别设置为transparent、transparent、#000、transparent，表示上、右、下、左四个方向的边框颜色，其中transparent表示透明色，即没有颜色。

这样就可以得到一个只有边框没有背景色的等腰直角三角形。

相关问题

css气泡框三角形

要实现一个带有三角形箭头的气泡框，可以使用 CSS 的 ::before 和 ::after 伪元素，同时利用 CSS 的 border 属性和 transform 属性进行样式的定制。

下面是一个简单的示例代码，可以作为参考：

<div class="bubble">
  <p>这是一个带有三角形箭头的气泡框。</p>
</div>

.bubble {
  position: relative;
  background-color: #f1f1f1;
  border-radius: 10px;
  padding: 10px;
  margin: 50px;
  text-align: center;
}

.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 10px;
  width: 0;
  height: 0;
}

.bubble::before {
  top: -20px;
  left: 50%;
  border-color: transparent transparent #f1f1f1 transparent;
  transform: translateX(-50%);
}

.bubble::after {
  top: -18px;
  left: 50%;
  border-color: transparent transparent #fff transparent;
  transform: translateX(-50%);
}

在上面的代码中，我们首先定义了一个 .bubble 类作为气泡框的基础样式，包括了背景色、圆角、内边距和外边距等属性。

接着，我们使用 ::before 和 ::after 伪元素分别创建了一个三角形箭头和一个白色的三角形箭头，通过设置它们的 position 属性为 absolute，使它们位于气泡框的上方。

为了实现三角形形状，我们设置了 border-style 为 solid，border-width 为 10px，同时将宽度和高度设置为 0，这样就创建了一个边框宽度为 10px 的三角形。

最后，我们通过设置 border-color 和 transform 属性，对三角形箭头的样式进行了定制，使其与气泡框相匹配。

以上是一个简单的示例代码，可以根据实际需要进行进一步的样式调整和优化。

css实现内部透明的三角形

可以使用CSS的border属性来实现内部透明的三角形。

首先，需要设置一个正方形的元素作为容器，然后设置其宽高和背景色。接着，设置元素的边框为透明，同时设置边框宽度和样式，使其只显示一条边框。

代码如下：

HTML:

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

CSS:

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

这样就可以实现一个内部透明的等腰直角三角形了。如果要实现其他类型的三角形，只需要调整border属性中的值即可。