ribbon style : demo 2

                        

                            

                                

                                    
This is a ribbon
                                
                            
                        
                    

                        :root{
                            --white:#fff;
                            --background:#eee; 
                            --color1:#434e59;
                            --color2:#222f3e;
                        }
                        .ribbon{
                            color: var(--white);
                            background: var(--background);
                            font-family: 'Amaranth', sans-serif;
                            font-size: 24px;
                            font-weight: 700;
                            text-align: center;
                            position: relative;
                            padding: 20px 0 100px;
                            margin: 0 15px 0 0;
                        }
                        .ribbon:before{
                            content: "";
                            background: linear-gradient(to top left,transparent 49%,var(--color2) 50%);
                            width: 15px;
                            height: 15px;
                            position: absolute;
                            top: 70px;
                            right: -15px;
                        }
                        .ribbon h3{
                            background: var(--color1);
                            font-size: 20px;
                            font-weight: 600;
                            padding: 15px 0;
                            width: calc(100% - 20px);
                            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%);
                            margin: 0 0 0 35px;
                        }
                        .ribbon.red{ --color1: #ff6b6b; }
                        .ribbon.red:before{ --color2:#ee5253; }
                        .ribbon.purple{ --color1:#5f27cd; }
                        .ribbon.purple:before{ --color2:#341f97; }
                        .ribbon.blue{ --color1:#25CCF7; }
                        .ribbon.blue:before{ --color2:#1B9CFC; }
                        @media screen and (max-width:990px){ 
                            .ribbon{ margin-bottom: 50px; } 
                        }