Создание сложного объекта

Добрый день, сегодня столкнулся с такой задачей не могу сделать вот такой элемент пробовал это сделать через так
position: relative; z-index: 9; transform: rotate(45deg); width: 4.6875vw; height: 4.6875vw; background: #ffffff; -webkit-box-shadow: 18px 18px 0px 0px rgba(255,156,0,1), 50px 50px 70px 10px rgba(0, 66, 103, 0.75); -moz-box-shadow: 18px 18px 0px 0px rgba(255,156,0,1), 50px 50px 70px 10px rgba(0, 66, 103, 0.75); box-shadow: 18px 18px 0px 0px rgba(255,156,0,1), 50px 50px 70px 10px rgba(0, 66, 103, 0.75);
Но выходит не получается получить такой же эффект а именно у меня левый и праавый угол белого блока не прикасается к оранжевому цвету как показано на рисунке Может кто то знает решение этой задачи?

Ответ

Вроде бы похоже ...
.a { margin:100px; width: 200px; height: 205px; background: #ccc; transform: rotate(45deg); position: relative; perspective: 200px; transform: rotateZ(30deg)rotateY(25deg); box-shadow: 10px 10px 6px #777, 7px 17px 6px #777; } .a:after { content: ""; width: 198px; height: 20px; position: absolute; top: 98%; left: 0; background: #777; transform: rotateX(-30deg); } .a:before { content: ""; width: 160px; height: 0px; position: absolute; top: 41.5%; left: 50%; border: 20px solid #777; transform: rotateZ(90deg)rotateX(50deg); }