立体的な要素ジェネレーター

文字

位置

面の色

奥行き

向き


その他

HTML

<p class="rectangular">立体的な要素ジェネレーター</p>

CSS

.rectangular {
  box-sizing: border-box;
  color: #000;
  font-size: 21px;
  text-align: left;
  width: 285px;
  padding: 5px;
  background: #eaa939;
  position: relative;
}
.rectangular::before,
.rectangular::after {
  content: '';
  display: block;
  background: inherit;
  position: absolute;
}
.rectangular::before {
  width: 100%;
  height: 12px;
  top: 100%;
  left: 0;
  transform-origin: top left;
  transform: skewX(50deg);
  filter: brightness(80%);
}
.rectangular::after {
  width: 14.301px;
  height: 100%;
  top: 0;
  left: 100%;
  transform-origin: top left;
  transform: skewY(40deg);
  filter: brightness(85%);
}