CODEWITHSUNDEEP
htmlcsssasscss-transforms
SedStan
SedStan

Reputation: 13

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.

Upvotes: 0

Views: 73

Answers (2)

Jax-p
Jax-p

Reputation: 8531

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>

Upvotes: 1

Liftoff
Liftoff

Reputation: 25372

You really only need the first argument in the skew transform to achieve this effect. The second argument will skew it vertically, which isn't what you want if you're trying to match your spec image.

I created this element using a parent div with relative positioning. Inside I have two spans that act as the border elements and a single p element which contains the text. The spans are absolutely positioned so they don't affect the p's position and can be placed on top of each other. Finally the outer div is a table and the inner p is a table-cell so I can easily align the contents of the p to the vertical and horizontal center.

This is done with plain CSS so it can be shown in a snippet, but you could just as well convert it to SASS.

div
{
  display: table;
  width: 400px;
  height: 100px;
  position: relative;
  margin-left: 50px;
}

div span
{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid black;
}

div span.left
{
  transform: skew(30deg);
}

div span.right
{
  transform: skew(-30deg);
}

div p
{
  display: table-cell;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}
<div>
  <span class="left"></span>
  <span class="right"></span>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Upvotes: 0

Related Questions