[分享]css不设宽高正方形三角形

在 CSS 中，我们往往需要给元素设置宽度和高度，才能确定它的形状和大小。然而，有时候我们需要让元素自适应大小，尤其是在响应式设计中，这就需要使用一些特殊的技巧。本文将介绍如何使用 CSS 实现不设宽...

在 CSS 中，我们往往需要给元素设置宽度和高度，才能确定它的形状和大小。然而，有时候我们需要让元素自适应大小，尤其是在响应式设计中，这就需要使用一些特殊的技巧。

本文将介绍如何使用 CSS 实现不设宽高的正方形和三角形。以下是对应的代码示例。

/* 不设宽高的正方形 */
.square {
  position: relative;
  width: 0;
  padding-bottom: 100%;
  background-color: #f00;
}

/* 不设宽高的三角形 */
.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #f00;
  border-right: 50px solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 50px solid transparent;
} 

对于不设宽高的正方形，我们使用了一个技巧，即通过“padding-bottom: 100%”让元素的高度与它的宽度相等，从而形成一个正方形。此外，还要将元素的“position”属性设置为“relative”，以便在后续的样式中应用绝对定位。

对于不设宽高的三角形，我们则使用了 CSS 的 border 属性。我们将上边框的宽度设为 50px，并将右、下和左三个方向的边框设为0，这样元素就形成了一个等腰直角三角形。通过调整边框的大小和颜色，我们可以实现各种不同形状和颜色的三角形。

通过以上这些技巧，我们可以在不设置宽高的情况下，灵活地实现各种自适应的形状效果，为响应式设计提供更多的可能性。