ribbon style : demo 6

                        

                            

                                

                                    
This is a ribbon
                                
                            
                        
                    

                        :root{
                            --white:#fff;
                            --color1: #227e22;
                            --color2: #d10074;
                            --color3: #ff0000;
                            --color4: #0253b9;
                        }
                        .ribbon{
                            color: var(--white);
                            font-family: "Fira Sans Condensed", sans-serif;
                            font-size: 24px;
                            font-weight: bold;
                            text-align: center;
                            text-transform: capitalize;
                            padding: 5px 0;
                            box-shadow: inset rgba(0, 0, 0, 0.9) -15px 0px 10px -10px;
                            margin: 0 15px;
                        }
                        .ribbon h3{
                            background: var(--color1);
                            font-size: 20px;
                            font-weight: 600;
                            position: relative;
                            padding: 15px 0;
                            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%);
                            box-shadow: inset rgba(0, 0, 0, 0.9) -15px 0px 10px -10px;
                            margin: 0 auto;
                        }
                        .ribbon.pink h3{ background: var(--color2); }
                        .ribbon.orange h3{ background: var(--color3);}
                        .ribbon.blue h3{ background: var(--color4); }
                        @media screen and (max-width:990px){ 
                            .ribbon{ margin-bottom: 50px; } 
                        }