.container03 {

    max-width: 768px; 
    max-height: 400px;
    position: relative;
    display: inline-block;
  }
  
  .container03::before {
    content: attr(data-ribbon);
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    width: 140px;
    --f: 10px; /* control the folded part*/
    --r: 15px; /* control the ribbon shape */
    --t: 10px; /* the top offset */
    position: absolute;
    inset: var(--t) calc(-1*var(--f)) auto auto;
    
    clip-path: 
      polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
        calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
        var(--r) calc(50% - var(--f)/2));
    background: #d2042d;
    color: white;
    box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
    font-size: 15px;
    padding: 5px 5px 5px 30px;
     
  }
  .left::before {
    left: 0;
    right: auto;
    transform: translate(-29.29%, -100%) rotate(-45deg);
    transform-origin: bottom right;
  }