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);

不同

＆＃13;

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)
}

＆＃13;

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

＆＃13;

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>

压扁响应的CSS3三角形

2 个答案: