5

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

введите сюда описание изображения

3 ответа 3

11

Решение SVG

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

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

.container {
  width: 30%;
  height: auto;
  box-shadow: 0 0 4px #131824;
}
<div class="container">
  <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 264">
    <defs>
      <linearGradient id="grad"
      x1="0%"
      y1="0%"
      x2="100%"
      y2="0%">
        <stop offset="0%" stop-color="#FD712C"/>
        <stop offset="100%" stop-color="#F32276"/>
      </linearGradient>
    </defs>
    <text x="80" y="30" fill="black" font-size="24px" font-family="sans-serif">Standard</text>
    <path d="m0.6 48.3 262.7 0 0 78.8L131.7 167 0.6 127Z" id="path4138" fill="url(#grad)"/>
    <text x="70" y="115" fill="white" font-size="54px" font-family="sans-serif">24.0</text> 
   <text x="90" y="220" fill="#777777" font-size="20px" font-family="sans-serif">Five User</text>
  </svg>
</div>

7

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

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

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

background-size: cover;

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

background: url('data:image/svg+xml;utf8, <svg id="wrapper_svg_1" viewBox="0 0 500 300" width="500" height="300"><style>#wrapper_svg_1{background: red;}</style><polygon fill="green"  stroke="none" stroke-width="1" points="0 0, 500 0, 500    150, 250 300, 0 150, "></polygon></svg>');
 background-size: cover;

<svg id="wrapper_svg_1" viewBox="0 0 500 300" width="500" height="300">
 <style>
  #wrapper_svg_1{
  background: red;
  }
 </style>
 <polygon fill="green"  stroke="none" stroke-width="1" points="0 0, 500 0, 500    150, 250 300, 0 150, ">                    
 </polygon>
</svg>

4

Решение 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;
}
<div class="card">
  <span class="title">  Standard</span>
  <div class="triangle">
    24.0
  </div>
  <ul>
    <li> bla bla bla</li>
    <li> bla bla bla</li>
    <li> bla bla bla</li>
    <li> bla bla bla</li>
    <li> bla bla bla</li>
  </ul>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.