I think that they should be made svg polygon , but how best to implement it, so that they are adaptive and fit to the width of the block in which they are located?

enter image description here

    3 answers 3

    SVG solution

    The solution is adaptive. Works in all browsers.

    Layout will not break when you change the scale, since all the design elements: text, patch, gradient are inside the SVG
    If there is a need to change the initial size of the block, then you need to change the percentage of the parent container .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>

      And to be adaptive, it must be implemented as a background image.

      Save this example in a separate file name.svg

      background-Image: url (the path to the file name.svg);

      background-size: cover;

      And the second option. Register directly in the 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>

        CSS solution clip-path . But we must take into account the fact that in IE && EDGE , it will not work.

         .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>