Search code examples
htmlcsssasscss-transforms

Opposing skewed rectangeles

I am trying to achieve these opposing skewed rectangles with text inside in css:

enter image description here

The first rectangle is set around the text container with the text skewing the opposite way of the rectangle.

HTML

<div class="col-lg-12 col-md-6">
        <div class="container-fluid md">
        <div class="rectangles rectangle-1">
          <div class="text_container">
            <?php if ($text) { ?> <div class="text WYSIWYG-styles"> <?= $text ?> </div> <?php } ?>
          </div>
        </div>
        </div>
      </div>

SCSS

    display: block;
    border: 1px solid $primary-color-2;
    padding: 60px;
    text-align: center;

    &.rectangle-1 {
      transform:skew(10deg, 10deg);
    }
    &.rectangle-2 {
      transform: skew(-10deg, 10deg);
    }
  }

  .text_container {
    .text {
      display: block;
      transform: skew(-10deg, -10deg);
    }
  }
}

The problem is getting the second rectangle to skew the opposite way on the same plane. I thought about about using a pseudo element. I don't think that would work. Obviously, another inner div will just create an inner rectangle.

This is what I have so far:

enter image description here

Any help would be greatly appreciated.

Solution

  • I thought about using a pseudo element

    Yea, you can use pseudo elements like this:

    .double-skew {
  position: relative;
  text-align: center;
  padding: 2rem;
  max-width: 80%;
  margin: 0 auto;
}
.double-skew:before, .double-skew:after {
  content: "";
  position: absolute;
  border: 1px solid black;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.double-skew:before {
  transform: skew(30deg);
}
.double-skew:after {
  transform: skew(-30deg);
}
    <div class="double-skew">
  Just wow!
</div>