使用 css 制作 odd-shaped 元素

Question

我正在尝试制作一个 odd-shaped 对话框，形状类似于下面 link 中的那个（没有摆动的尾巴）。我考虑过通过 polyfill 来实现，但最终导致元素太大。我想我也许可以用伪元素来做，但我不认为我可以在效果后面加上阴影并让 odd-shaped top/bottom 只有两个伪元素。

我能想到的最好的方法是在主里面嵌套多个 div 并用 absolute 定位它们并手动设置 top ，但我想知道是否有一种更简单的方法。

如果我想做一个这样的div，然后在里面写东西而不被切断，我应该怎么做？

Answer 1

使用透视和变换绝对定位的伪类单个元素可能看起来像这样。

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

<div>i know kung foo</div>

使用 css 制作 odd-shaped 元素

Making a odd-shaped elementwith css

css

css-shapes