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

248

21 мая 2017, 20:44

Добрый день, сегодня столкнулся с такой задачей не могу сделать вот такой элемент пробовал это сделать через так

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

Но выходит не получается получить такой же эффект а именно у меня левый и праавый угол белого блока не прикасается к оранжевому цвету как показано на рисунке Может кто то знает решение этой задачи?

Answer 1

Вроде бы похоже ...

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

<div class="a"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Поиск элемента в HTML документе с помощью PHP

Как в PHP можно найти нужный элемент в HTML документе или строке, аля get_file_content($htmlString);

263

HTML

Как стилизовать скроллбар на странице

Увидел такое в шаблоне Essential и хочу спросить, как стилизовать скроллбар справа? Вот картинкаОн на ней синий и толще, а не как стандартный

287

HTML

HTML: форма без атрибута action

Здравствуйте!

254

Включение программы через время

Как сделать, чтобы при выборе варианта времени из CheckedListBox и подтверждении кликом по Button, программа выключилась после прохождения выбранного...

252