Добрый день,
сегодня столкнулся с такой задачей не могу сделать вот такой элемент
пробовал это сделать через так
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);
}
Комментариев нет:
Отправить комментарий