代码之家 › 专栏 › 技术社区 › Gavin Bark

使用css制作奇数形状元素

css-shapes css

Gavin Bark · 技术社区 · 7 年前

enter image description here

div s在主视图中,并用 absolute 并设置 top 手动操作,但我想知道是否有更简单的方法。

部门 像这样在里面写东西而不被剪掉,我该怎么做呢?

1 回复 | 直到 7 年前

Michael Coker 7 年前

使用透视和转换绝对定位伪类的单个元素可以是这样的。

div {
  position: relative;
  display: inline-block;
  color: white;
  margin: 3em;
  perspective: 250px;
}
div::before, div::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -1em;
  left: -1.5em;
  right: -2em;
  bottom: -1em;
  background: black;
  padding: 2em 3em .5em .5em;
  transform: rotateX(180deg) rotateY(15deg) rotate(1.5deg) skewX(25deg);
}

div::before {
  background: white;
  top: -1.5em;
  left: -2.25em;
  right: -2.75em;
  bottom: -1.75em;
  transform: rotateX(180deg) rotateY(15deg) skewX(35deg);
}

body {
  background: red;
}