Как сделать такие пятиугольники (+адаптивные) через css?

#html #css #css3 #svg #адаптивная_верстка

Думаю, что их стоит сделать svg polygon, но как это лучше реализовать, чтобы они
и адаптивными были и подгонялись под ширину блока, в котором находятся?


    

Ответы

Ответ 1

Решение SVG

Решение адаптивно. Работает во всех браузерах.  

Вёрстка не сломается при изменении масштаба, так как все оформительские элементы:
текст, патч, градиент находятся внутри SVG
Если будет необходимость поменять начальные размеры блока, то нужно изменить проценты
родительского контейнера .container



.container {
  width: 30%;
  height: auto;
  box-shadow: 0 0 4px #131824;
}

  



Ответ 2

А чтобы была адаптивной,  ее надо внедрить как фоновую картинку.

Сохранить сей пример в отдельном файле name.svg


  background-Image: url(путь к файлу name.svg);
  
  background-size: cover;


И второй вариант. Прописать прямо в css.

background: url('data:image/svg+xml;utf8, ');
 background-size: cover;







Ответ 3

Решение CSS clip-path. Но надо учесть тот факт, что в IE && EDGE, работать не будет.



.triangle {
  width: 250px;
  height: 140px;
  background: linear-gradient(45deg, #FFDD00, #FF00AE);
  -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 60%, 50% 100%, 0 60%);
  clip-path: polygon(0% 0%, 100% 0, 100% 60%, 50% 100%, 0 60%);
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 40px;
  font-family: sans-serif;
}

.card {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  font-family: sans-serif;
  color: #aaa;
  border: 1px solid #ccc;
  display: inline-block;
}

.title {
  text-align: center;
  color: #333;
  font-size: 30px;
  padding: 10px;
  display: block;
}

    Standard
  

    24.0
  
  

    
 bla bla bla
    
 bla bla bla
    
 bla bla bla
    
 bla bla bla
    
 bla bla bla