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

#html #css

такой себе квадратик в рамочке с обводкой. Сделал бы через бордер, да с обводкой
не получается. Подскажите как делать
    

Ответы

Ответ 1

Приблизительно так:



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

  

  

  

  

  




Ответ 2

Приведу все же способ с border-image, т.к. 3d трансформация все же не очень соответствует
макету. Напомню так же, что border-image работает с картинкой (которая у меня кодирована
в base64). При этом картинка делится на 9 частей, как поле в "крестиках-ноликах". Каждая
угловая клетка встает в border на соответствующий угол. Каждая боковая - растягивается
по соответствующей стороне. Центральная часть картинки не используется.



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