Гибкая геометрическая фигура

221
01 апреля 2018, 18:24

Ребят нужно реализовать вот такую геометрическую фигуру с тенью , и возможностью увеличения высоты без растяжек и потери качества

Answer 1

div { 
  margin: 15px auto; 
  width: 150px; 
  min-height: 200px; 
  position: relative; 
  background: linear-gradient(to bottom, rgba(0, 59, 59, 1) 0%, rgba(0, 124, 124, 1) 100%); 
  overflow: hidden; 
  -webkit-clip-path: polygon(50% 0%, 100% 25px, 100% 100%, 0 100%, 0 25px); 
  clip-path: polygon(50% 0%, 100% 25px, 100% 100%, 0 100%, 0 25px); 
} 
 
div:before { 
  content: ''; 
  position: absolute; 
  bottom: 0; 
  left: 50%; 
  margin-left: -50px; 
  width: 100px; 
  height: 100px; 
  background: #009898; 
  background: radial-gradient(ellipse at center, rgba(0, 152, 152, .15) 0%, rgba(0, 152, 152, .25) 50%, rgba(0, 152, 152, .15) 100%); 
  border-radius: 50%; 
  box-shadow: 0 0 0 55px rgba(0, 152, 152, .05); 
  filter: blur(5px); 
}
<div></div>

READ ALSO
Как правильно конвертировать шрифт?

Как правильно конвертировать шрифт?

Скачал веб-ширифт с двумя начертаниями Regular и BoldКаждого начертания было всего по три расширения woff2, woff, ttf

259
Вывод текста из спойлера в центр

Вывод текста из спойлера в центр

использую спойлер, как сделать чтобы текст что выдвигается от ссылки, был не внизу где выдвигается под ссылкой, а в центре окна и чтобы при...

267
Внутренние тени slick-slider

Внутренние тени slick-slider

Нужно сделать внутренние тени в slick-slider, как показано на рисунке:

243
Убрать в Head подключаемые стили

Убрать в Head подключаемые стили

Всем привет! Есть проблема в head CMS Wordpress добавляется портянка стилей на +200 строк, вопрос, как убрать лишний код id='hybridextend-style-inline-css' и просто...

239