ribbon style : demo 4

                        

                            

                                

                                    
This is a ribbon
                                
                            
                        
                    

                        :root{
                            --white:#fff;
                            --background:#eee; 
                            --color1:#0be881;
                            --color2:#05c46b;
                        }
                        .ribbon{
                            color: var(--white);
                            background: var(--background);
                            font-family: "Playwrite IT Moderna", cursive;
                            font-size: 24px;
                            font-weight: 700;
                            text-align: center;
                            position: relative;
                            padding: 100px 0 20px;
                            margin: 0 0 0 15px;
                        }
                        .ribbon:before,
                        .ribbon:after{
                            content: "";
                            background: var(--color2);
                            width: 15px;
                            height: 25px;
                            border-radius: 50px 0 0 50px;
                            position: absolute;
                            top: 75px;
                            left: -15px;
                            z-index: 1;
                        }
                        .ribbon:after{
                            background:var(--color1);
                            width: 15px;
                            height: 15px; 
                            border-radius: 0;
                            position: absolute;
                            top: 85px;
                            left: -15px;
                            z-index: 0;
                        }
                        .ribbon h3{
                            background: var(--color1);
                            font-size: 20px;
                            font-weight: 600;
                            padding: 15px 0;
                            width: calc(100% - 20px);
                            border-radius: 0 50px 50px 25px;
                            position: relative;
                            left: -15px;
                            margin: 0;
                        }
                        .ribbon.red{ --color1: #ef5777; }
                        .ribbon.red:before{ --color2:#f53b57; }
                        .ribbon.purple{ --color1:#575fcf; }
                        .ribbon.purple:before{ --color2:#3c40c6; }
                        .ribbon.blue{ --color1:#4bcffa; }
                        .ribbon.blue:before{ --color2:#0fbcf9; }
                        @media screen and (max-width:990px){ 
                           .ribbon{ margin-bottom: 50px; } 
                        }