相对倾斜的矩形

Question

我正在尝试在 css:

中实现这些带有文本的相对倾斜矩形

第一个矩形围绕文本容器设置，文本以与矩形相反的方式倾斜。

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

问题是让第二个矩形在同一平面上以相反的方式倾斜。我考虑过使用伪元素。我认为那行不通。显然，另一个内部 div 只会创建一个内部矩形。

这是我目前拥有的：

如有任何帮助，我们将不胜感激。

Answer 1

您实际上只需要倾斜变换中的第一个参数即可实现此效果。第二个参数将垂直倾斜它，如果您试图匹配您的规范图像，这不是您想要的。

我使用具有相对定位的父 div 创建了这个元素。在内部，我有两个用作边框元素的 span 和一个包含文本的 p 元素。跨度是绝对定位的，因此它们不会影响 p 的位置，并且可以彼此叠加。最后，外部 div 是一个 table，内部 p 是一个 table 单元格，因此我可以轻松地将 p 的内容对齐到垂直和水平中心。

这是用普通的 CSS 完成的，因此它可以在片段中显示，但您也可以将其转换为 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>

Answer 2

I thought about using a pseudo element

是的，你可以像这样使用伪元素：

.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>

相对倾斜的矩形

Opposing skewed rectangeles

html

css

sass

css-transforms