Farlo con il codice mi risolverebbe la vita da punto di vista che posso cambiare il colore del nastro e posso creare il rettangolo che vedi nella parte in basso. E quindi riesco anche adattarlo per smartphone.
Ok, quindi ti serve poter cambiare il colore al volo e deve essere ridimensionabile.

Se uso il png, devo crearlo ed è difficile riprendere quel tipo di forme dato che la foto che ho inserito è pieno di copyright del produttore. Mi diventa difficile...
Immagino, ad ogni modo la grafica andrebbe ricreata anche se lo fai in CSS. In alternativa dovresti cercare un png gratuito che faccia al caso.

che consiglio mi daresti?
In questo caso gli pseudo elementi CSS possono essere limitativi nell'impostazione di una grafica simile (sebbene non sia così complessa).

Ti consiglierei piuttosto l'uso di un elemento svg da inserire dentro il codice HTML. Si tratta quindi di realizzare quella grafica con un qualsiasi programma con cui si possa esportare il codice svg (con sintassi xml). Tale codice potrai inserirlo dentro il tuo HTML come un elemento <svg>. A quel punto puoi attribuire degli id o delle classi agli elementi interni di tale svg per poterne applicaredelle regole CSS, ad esempio per gestire il colore.

Capisco che per un novizio non sia troppo semplice. Io ho fatto qualche prova usando il primo servizio online trovato sul web (questo) per la realizzazione della grafica e l'esportazione in svg. Chiaro che la grafica va creata; personalmente ho ricalcato in qualche modo l'immagine da te postata.

Una volta creata la grafica ed esportato il codice, l'ho inserito in una semplice pagina HTML.

Questo il risultato:
codice:
<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <style>
      
         #portapass{
            width: 100px;                 /* dimensioni */
            height: calc(100px * 2.55);
            
            filter: hue-rotate(120deg);   /* colore rosso */
         }
         
      </style>
   </head>
   <body>
      
      <svg id="portapass" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 300 765" width="300" height="765">
         <defs>
            <path d="M35.13 0L265.6 0L300 36.9L0 36.9L35.13 0Z" id="dtlRDWxq4"/>
            <radialGradient id="gradientb6CmVR7pW" gradientUnits="userSpaceOnUse" cx="151.57" cy="18.45" dx="300.09" dy="18.45" r="148.52">
               <stop style="stop-color: #829ad8;stop-opacity: 1" offset="0%"/>
               <stop style="stop-color: #071b59;stop-opacity: 1" offset="100%"/>
            </radialGradient>
            <path d="M128.82 680L0 37.27L35.32 -0.37L168.08 680L128.82 680Z" id="b2SyLwrnCM"/>
            <radialGradient id="gradientbnA6XCjR1" gradientUnits="userSpaceOnUse" cx="62.12" cy="347.76" dx="-5.43" dy="11.29" r="343.18">
               <stop style="stop-color: #829ad8;stop-opacity: 1" offset="0%"/>
               <stop style="stop-color: #2c407d;stop-opacity: 1" offset="100%"/>
            </radialGradient>
            <path d="M171.18 680L300 37.64L264.68 0L131.92 680L171.18 680Z" id="b3vnPHYEbY"/>
            <radialGradient id="gradientdFdEWc2AZ" gradientUnits="userSpaceOnUse" cx="215.96" cy="374.95" dx="287.12" dy="12.38" r="369.49">
               <stop style="stop-color: #829ad8;stop-opacity: 1" offset="0%"/>
               <stop style="stop-color: #2c407d;stop-opacity: 1" offset="100%"/>
            </radialGradient>
            <path d="M170.8 709.94L171.24 710.01L171.67 710.11L172.09 710.22L172.5 710.35L172.91 710.5L173.3 710.67L173.69 710.85L174.07 711.05L174.43 711.27L174.79 711.51L175.13 711.75L175.46 712.02L175.78 712.3L176.09 712.59L176.38 712.9L176.66 713.22L176.92 713.55L177.17 713.89L177.4 714.24L177.62 714.61L177.82 714.99L178.01 715.37L178.18 715.77L178.33 716.17L178.46 716.59L178.57 717.01L178.66 717.44L178.74 717.87L178.79 718.32L178.82 718.77L178.83 719.22L178.83 737.79L178.82 738.24L178.79 738.69L178.74 739.14L178.66 739.57L178.57 740L178.46 740.42L178.33 740.84L178.18 741.24L178.01 741.64L177.82 742.02L177.62 742.4L177.4 742.77L177.17 743.12L176.92 743.46L176.66 743.79L176.38 744.11L176.09 744.42L175.78 744.71L175.46 744.99L175.13 745.26L174.79 745.5L174.43 745.74L174.07 745.96L173.69 746.16L173.3 746.34L172.91 746.51L172.5 746.66L172.09 746.79L171.67 746.9L171.24 747L170.8 747.07L170.36 747.12L169.91 747.15L169.46 747.17L130.54 747.17L130.09 747.15L129.64 747.12L129.2 747.07L128.76 747L128.33 746.9L127.91 746.79L127.5 746.66L127.09 746.51L126.7 746.34L126.31 746.16L125.93 745.96L125.57 745.74L125.21 745.5L124.87 745.26L124.54 744.99L124.22 744.71L123.91 744.42L123.62 744.11L123.34 743.79L123.08 743.46L122.83 743.12L122.6 742.77L122.38 742.4L122.18 742.02L121.99 741.64L121.82 741.24L121.67 740.84L121.54 740.42L121.43 740L121.34 739.57L121.26 739.14L121.21 738.69L121.18 738.24L121.17 737.79L121.17 719.22L121.18 718.77L121.21 718.32L121.26 717.87L121.34 717.44L121.43 717.01L121.54 716.59L121.67 716.17L121.82 715.77L121.99 715.37L122.18 714.99L122.38 714.61L122.6 714.24L122.83 713.89L123.08 713.55L123.34 713.22L123.62 712.9L123.91 712.59L124.22 712.3L124.54 712.02L124.87 711.75L125.21 711.51L125.57 711.27L125.93 711.05L126.31 710.85L126.7 710.67L127.09 710.5L127.5 710.35L127.91 710.22L128.33 710.11L128.76 710.01L129.2 709.94L129.64 709.89L130.09 709.86L130.54 709.84L169.46 709.84L169.91 709.86L170.36 709.89L170.36 709.89L170.8 709.94ZM132.2 714.89L131.8 714.96L131.4 715.04L131.02 715.15L130.64 715.27L130.27 715.42L129.91 715.59L129.57 715.78L129.24 715.99L128.92 716.22L128.61 716.46L128.32 716.72L128.04 717L127.78 717.29L127.54 717.59L127.31 717.91L127.11 718.24L126.92 718.59L126.75 718.95L126.6 719.31L126.47 719.69L126.36 720.08L126.28 720.47L126.22 720.88L126.18 721.29L126.17 721.71L126.17 735.3L126.18 735.72L126.22 736.13L126.28 736.54L126.36 736.93L126.47 737.32L126.6 737.7L126.75 738.06L126.92 738.42L127.11 738.77L127.31 739.1L127.54 739.42L127.78 739.72L128.04 740.02L128.32 740.29L128.61 740.55L128.92 740.79L129.24 741.02L129.57 741.23L129.91 741.42L130.27 741.59L130.64 741.74L131.02 741.86L131.4 741.97L131.8 742.05L132.2 742.12L132.61 742.15L133.03 742.17L168.16 742.17L168.51 742.15L168.85 742.12L169.18 742.07L169.51 742L169.83 741.92L170.14 741.81L170.44 741.69L170.74 741.55L171.02 741.39L171.3 741.22L171.56 741.03L171.81 740.83L172.05 740.62L172.28 740.39L172.5 740.15L172.7 739.9L172.88 739.63L173.06 739.36L173.21 739.07L173.35 738.78L173.48 738.48L173.58 738.16L173.67 737.84L173.74 737.52L173.79 737.18L173.82 736.84L173.83 736.5L173.83 721.71L173.82 721.29L173.78 720.88L173.72 720.47L173.64 720.08L173.53 719.69L173.4 719.31L173.25 718.95L173.08 718.59L172.89 718.24L172.69 717.91L172.46 717.59L172.22 717.29L171.96 717L171.68 716.72L171.39 716.46L171.08 716.22L170.76 715.99L170.43 715.78L170.09 715.59L169.73 715.42L169.36 715.27L168.98 715.15L168.6 715.04L168.2 714.96L167.8 714.89L167.39 714.86L166.97 714.85L133.03 714.85L132.61 714.86L132.61 714.86L132.2 714.89Z" id="a9rjaa6Er"/>
            <linearGradient id="gradientbexgxxZa" gradientUnits="userSpaceOnUse" x1="161.26" y1="709.84" x2="123.51" y2="747.17">
               <stop style="stop-color: #312d2e;stop-opacity: 1" offset="0%"/>
               <stop style="stop-color: #ffffff;stop-opacity: 1" offset="69.8497582445905%"/>
               <stop style="stop-color: #010000;stop-opacity: 1" offset="100%"/>
            </linearGradient>
            <path d="M128.92 680L171.08 680L171.08 720L128.92 720L128.92 680Z" id="a1FlVYgTg4"/>
            <linearGradient id="gradienta2XL3BFcgH" gradientUnits="userSpaceOnUse" x1="171.08" y1="720" x2="128.92" y2="720">
               <stop style="stop-color: #1a1a1a;stop-opacity: 1" offset="0%"/>
               <stop style="stop-color: #ffffff;stop-opacity: 1" offset="78.04773526992581%"/>
               <stop style="stop-color: #010000;stop-opacity: 1" offset="100%"/>
            </linearGradient>
            <path d="M159.23 732.71C163.18 732.71 166.38 735.91 166.38 739.86C166.38 744.89 166.38 752.82 166.38 757.85C166.38 761.8 163.18 765 159.23 765C154.11 765 145.89 765 140.77 765C136.82 765 133.62 761.8 133.62 757.85C133.62 752.82 133.62 744.89 133.62 739.86C133.62 735.91 136.82 732.71 140.77 732.71C145.89 732.71 154.11 732.71 159.23 732.71Z" id="a2SQ0DQ8Dn"/>
            <linearGradient id="gradientc1QNEyCy81" gradientUnits="userSpaceOnUse" x1="166.38" y1="765" x2="133.62" y2="765">
               <stop style="stop-color: #1a1a1a;stop-opacity: 1" offset="0%"/>
               <stop style="stop-color: #ffffff;stop-opacity: 1" offset="74.72955877459701%"/>
               <stop style="stop-color: #010000;stop-opacity: 1" offset="100%"/>
            </linearGradient>
         </defs>
         <g>
            <g>
               <g>
                  <g>
                     <use xlink:href="#dtlRDWxq4" opacity="1" fill="url(#gradientb6CmVR7pW)"/>
                  </g>
                  <g>
                     <use xlink:href="#b2SyLwrnCM" opacity="1" fill="url(#gradientbnA6XCjR1)"/>
                  </g>
                  <g>
                     <use xlink:href="#b3vnPHYEbY" opacity="1" fill="url(#gradientdFdEWc2AZ)"/>
                  </g>
               </g>
               <g>
                  <use xlink:href="#a9rjaa6Er" opacity="1" fill="url(#gradientbexgxxZa)"/>
               </g>
               <g>
                  <use xlink:href="#a1FlVYgTg4" opacity="1" fill="url(#gradienta2XL3BFcgH)"/>
               </g>
               <g>
                  <use xlink:href="#a2SQ0DQ8Dn" opacity="1" fill="url(#gradientc1QNEyCy81)"/>
               </g>
            </g>
         </g>
      </svg>
      
      
   </body>
</html>
Come vedi, ho inserito l'elemento <svg> a cui ho applicato un id in modo da poterlo poi gestire col CSS.

Nel CSS puoi vedere che ho ridimensionato l'elemento e gli ho dato un colore (di base è blu come l'immagine originale).

Per poter modificare il colore in teoria si può intervenire (da CSS) sulle proprietà CSS relative agli elementi SVG e, ad esempio, definirle per gli elementi interni a quello stesso svg. In questo caso però sono presenti dei riempimenti con diverse sfumature e verrebbe difficile da CSS ridefinire tutte le varie sfumature

Una soluzione alternativa può essere quella di applicare un filtro CSS all'intero oggetto, nello specifico ho usato hue-rotate() in modo da "ruotare" la tonalità di colore partendo dall'immagine originale. Per Apportare ulteriori variazioni (saturazione, luminosità, ecc) è possibile usare anche altre relative funzioni filtro (vedi qui).

Per ulteriori info riguardo SVG e CSS puoi consultare questa guida https://www.html.it/guide/svg-e-css-la-guida/

Per il momento credo sia sufficiente quanto indicato. Magari fai qualche prova e vedi se può andare una soluzione del genere.
Se hai bisogno di chiarimenti chiedi pure.
Buon proseguimento.