Flatten a Responsive CSS3 Triangle

Question

I've created a responsive CSS3 triangle using the following guide.

The problem I now face is that I want to decrease its height. So it's not a 90-degree triangle but rather, I want to adjust its height to for example 30 pixels whilst maintaining a skewed triangle shape as well as it's responsiveness.

Here is what I have so far:

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>

I tried experimenting with the perspective transform but with no luck.

Try playing with the top positioning on your pseudo, -200 for example. Is that the sort of thing you're after? — Xoog, Jan 29 '18 at 09:22

score 2 · Accepted Answer · answered Jan 29 '18 at 09:57

You can scale the element to whatever ratio you want. I've compressed the triangle in my code by 2. Just use transform: scale(1, 0.5) rotate(45deg);

Note: The order of transformations will do matter. The result of transform: rotate(45deg) scale(1, 0.5); is different from 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>

score 1 · Answer 2 · answered Jan 29 '18 at 09:59

Answer by spooky daimon is way more intuitive, go for that one. Just to show the possibilities, you can also skew the pseudo element and adapt rotation as well as translation.

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>

Flatten a Responsive CSS3 Triangle

2 Answers2