展平响应式 CSS3 三角形

Question

我使用以下指南创建了一个响应式 CSS3 三角形。

指导

我现在面临的问题是我想降低它的高度。所以它不是一个 90 度的三角形，而是我想调整它的高度，例如 30 像素，同时保持倾斜的三角形形状以及它的响应能力。

这是我到目前为止所拥有的：

p {
  margin: 0;
}
body {
  background: black;
}
.container {
  width: 50%;
  margin: 0 auto;
}
.item {
  background: white;
}
.tr {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding-bottom: 100%;
}
.tr:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  background: white;
  transform-origin: top right;
  transform: rotate(45deg);
}

<div class="container">
  <div class="item">
    <h1>Some Content</h1>
    <p>Dummy Content</p>
  </div>
  <div class="tr"></div>
</div>

我尝试尝试透视变换，但没有成功。

Answer 1

您可以将元素缩放到所需的任何比例。我已经将代码中的三角形压缩了 2。只需使用transform: scale(1, 0.5) rotate(45deg);

注意：转换的顺序很重要。结果 transform: rotate(45deg) scale(1, 0.5);不同于transform: scale(1, 0.5) rotate(45deg);

p {
  margin: 0;
}
body {
  background: black;
}
.container {
  width: 50%;
  margin: 0 auto;
}
.item {
  background: white;
}
.tr {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding-bottom: 100%;
}
.tr:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  background: white;
  transform-origin: top right;
  transform: scale(1, 0.5) rotate(45deg)
}

<div class="container">
  <div class="item">
    <h1>Some Content</h1>
    <p>Dummy Content</p>
  </div>
  <div class="tr"></div>
</div>

Answer 2

幽灵般的守护神回答更直观，去那个。只是为了展示可能性，您还可以倾斜伪元素并适应旋转和平移。

p {
  margin: 0;
}
body {
  background: black;
}
.container {
  width: 50%;
  margin: 0 auto;
}
.item {
  background: white;
}
.tr {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding-bottom: 100%;
}
.tr:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  background: white;
  transform-origin: top right;
  transform: translate(25%) rotate(30deg) skew(-30deg);
}

<div class="container">
  <div class="item">
    <h1>Some Content</h1>
    <p>Dummy Content</p>
  </div>
  <div class="tr"></div>
</div>