:root{ --white:#fff; --color:#ec008c; } .ribbon{ color: var(--white); font-family: "Playwrite CZ", cursive; font-size: 24px; font-weight:900; width:100px; text-transform: capitalize; position: relative; padding: 50px 10px; margin: 0 auto; } .ribbon h3{ background: var(--color); font-size: 20px; font-weight: 600; text-transform: capitalize; position: relative; padding: 30px 15px 70px; display: inline-block; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); box-shadow: inset rgba(0, 0, 0, 0.5) 0px 15px 10px -10px; transform: translateX(-50%); position: absolute; top: 0; left: 50%; margin: 0 auto; } .ribbon.orange{ --color: #ff5627; } .ribbon.green{ --color:#24c30f; } .ribbon.blue{ --color:#0775c0; } @media screen and (max-width:990px){ .ribbon{ margin-bottom: 50px; } }