html - 两个边缘不同倾斜的 Div

Question

这是我想要实现的目标：

倾斜的div：

HTML：

<span class="container">
    <span class="element">some dummy text</span>
</span>

CSS：

.container .element {
  font-size: 24px;
  background-color: gray;
  padding: 5px;
  position: relative; 
  }
  .container .element:before {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: gray;
    transform-origin: bottom left;
    -ms-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
    transform: skew(-20deg, 0deg); 
    }
  .container .element:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: gray;
    transform-origin: bottom left;
    -ms-transform: skew(0deg, -1deg);
    -webkit-transform: skew(0deg, -1deg);
    transform: skew(0deg, -1deg); 
    }

https://jsfiddle.net/mktcany9/

即使有很多关于类似 div 的主题，我也无法真正做到像图像上那样。

标签： htmlcss

Answer 1

这可能会帮助你。

变换原点属性允许伪元素从右下角倾斜，溢出的部分用 隐藏overflow:hidden;。

div {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
}

div:after {
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

body {
  background: #fff;
}

<div>slanted div text</div>
<div>
  slanted div text<br/> on several lines<br/> an other line
</div>
<div>wider slanted div text with more text inside</div>