ribbon style : demo 8

                        

                            

                                

                                    
This is a ribbon
                                
                            
                        
                    

                        :root{
                            --white:#fff;
                            --background: linear-gradient(225deg, #90CCAF, #2FAABA);
                        }
                        .ribbon{
                            color: var(--white);
                            font-family: "Cabin", sans-serif;
                            font-size: 24px;
                            font-weight: 900;
                            text-align: center;
                            text-transform: capitalize;
                            margin: 0 15px;
                        }
                        .ribbon h3{
                            background: var(--background);
                            font-size: 20px;
                            font-weight: 600;
                            position: relative;
                            padding: 15px 0;
                            clip-path: polygon(100% 0, 90% 50%, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
                            margin: 0 auto;
                        }
                        .ribbon.purple h3{ background: linear-gradient(225deg, #7261C9, #4751AD); }
                        .ribbon.orange h3{ background:linear-gradient(225deg, #ffb01d, #FD622E); }
                        .ribbon.green h3{ background: linear-gradient(225deg, #5FCB71, #03776B); }
                        @media screen and (max-width:990px){ 
                           .ribbon{ margin-bottom: 30px; } 
                        }