как создать такую фигуру на css3

.container { 
  margin: 40px 30px; 
  height: 10em; 
  width: 10em; 
  perspective: 500px; 
  box-shadow: 0 0 0 23px black; 
  background-color: black; 
} 
 
.side { 
  width: 10em; 
  height: 10em; 
  position: absolute; 
} 
 
.center { 
  transform: translateZ(-5.4em); 
  background: #cfe2f3; 
} 
 
.left { 
  transform: translateX(-5.2em) rotateY(90deg); 
  background: #e3edf7; 
} 
 
.right { 
  transform: translateX(5.2em) rotateY(90deg); 
  background: #7d8791; 
} 
 
.top { 
  transform: translateY(-5.2em) rotateX(90deg); 
  background: #d7e7f6; 
} 
 
.bottom { 
  transform: translateY(5.2em) rotateX(90deg); 
  background: #a4b4c3; 
}

<div class="container"> 
  <div class="center side"></div> 
  <div class="left side"></div> 
  <div class="right side"></div> 
  <div class="top side"></div> 
  <div class="bottom side"></div> 
</div>

div { 
  background-color: #CEE0F1; 
  width: 200px; 
  height: 200px; 
  border-width: 60px; 
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAC8BAMAAAAwZ9mYAAAAElBMVEUAAAB8hY+issDO4PHW5vTi7PafhZdPAAACWUlEQVR42u3ZzW3bQBRFYcq42asEIy2kgSxSQEp1AVmwAbdgpINkH8IOID3O83B+TItnACN5t4CDDyOunjQNXeQj/6Hz3yZ2y5zl568TujnXLxO6JT3OEP6c8iP4i/+0I/hzlv/+wPKX/MP8BPMv+NPLJc/zr6Hzr0ue51/x9jg43/CWx/mGtzzNN/yap/mGX/Mw3/ApD/MNn/Is3/CeZ/mG9zzKX/GeR/kr3vMkP+E9T/IT3vMg3/GeB/mO9zzHN3ye5/iGz/MY3/CbPMY3/CZP8Q2/zVN8w2/zEN/wRR7iG77IM3zDl3mGb/gyj/BXfJlH+Cu+zBP8hC/zBD/hyzzAd3yZB/iOL/PH+Yav54/zDV/PH+YbvpE/zDf8m/mS/2P3x3Pu50v+u3Z6x8HF+TfjPU/wT+17DsE/t/MA/zT22HUem7/5VPflzcDjR7gEDlrkIx95fJGPfOTxRT7ykccX+chHHl/kIx95fJGPfOTxRT7ykcf3T+cfx+an/yD/+4Y/9f7sz7/coH8g+ALwHb4IfJuvLv7zjvLzzw5fPfzdHvhdj68e/n7Xw9x3+Orjj/J1GN/l6zC+y9dxfI+v4/geXwC+wxeA7/BF4Nt8Efg2Xwi+yReCb/LF4Ft8MfgWXxC+wReEb/BF4et8Ufg6Xxi+yheGr/LF4Wt8cfgaXyC+wheIr/BF4ku+SHzJF4ov+ELxBV8sfssXi9/yBeM3fMH4DV80PueLxud84fiMLxyf+Jc8j3/NF49fUykP4698z8P4VzGNwDtfI/BrzvPPT9OIIdeoyEee3l8b7t6ArixYmgAAAABJRU5ErkJggg==") 60 60 60 60 stretch stretch; 
  border-style: inset; 
}

<div></div>