遠近感のない立方体を CSS でつくる

つくるもの

方法

• 長方形の右側と下側にひし形をくっつけているだけです。
• ひし形は transform:skewY(45deg) などを使うと簡単にできます。

他に良い方法はないものでしょうか..

コード

<div class="cube">
  りったいてきなものをつくりたい
  <div class="right-side"></div>
  <div class="bottom-side"></div>
<div>

.cube {
  padding: 20px;
  box-sizing: border-box;
  border-left: solid 3px black;
  border-top: solid 3px black;
  background-color: #fff;
  width: 300px;
  height: 200px;
  position: relative;
}
.right-side {
  box-sizing: border-box;
  position: absolute;
  top: -3px;
  right: -30px;
  border: solid 3px black;
  border-top: solid 4px black;
  border-bottom: solid 2px black;
  background-color: #f9f3d3;
  height: 200px;
  width: 30px;
  transform-origin:0 0;
  transform:skewY(45deg);
}
.bottom-side {
  box-sizing: border-box;
  position: absolute;
  bottom: -30px;
  left: -3px;
  border: solid 3px black;
  border-left: solid 4px black;
  border-right: solid 2px black;
  background-color: #f9f3d3;
  height: 30px;
  width: 300px;
  transform-origin:0 0;
  transform:skewX(45deg);
}

以上です。