ribbon style : demo 1

                        

                            

                                

                                    
This is a ribbon
                                
                            
                        
                    

                        :root{
                            --white:#fff;
                            --background:#d1ccc0; 
                            --color1:#c60505;
                            --color2:#510101;
                        }
                        .ribbon{
                            color: var(--white);
                            background: var(--background);
                            font-family: 'Alegreya Sans', sans-serif;
                            font-size: 24px;
                            font-weight: bold;
                            text-align: center;
                            text-transform: capitalize;
                            padding: 20px 0 100px;
                            margin: 0 15px;
                        }
                        .ribbon h3{
                            background: var(--color1);
                            font-size: 20px;
                            font-weight: 600;
                            position: relative;
                            padding: 15px 0;
                            margin: 0 -15px
                        }
                        .ribbon h3:before,
                        .ribbon h3:after{
                            content: "";
                            background: linear-gradient(to top right,transparent 49%,var(--color2) 50%);
                            width: 15px;
                            height: 15px;
                            position: absolute;
                            bottom: -15px;
                            left: 0;
                        }
                        .ribbon h3:after{
                            left: auto;
                            right: 0;
                            background: linear-gradient(to top left,transparent 49%,var(--color2) 50%);
                        }
                        .ribbon.orange{ --color1: #f75700; }
                        .ribbon.orange h3:before,
                        .ribbon.orange h3:after{ --color2:#ec3305; }
                        .ribbon.purple{ --color1:#9F27E8; }
                        .ribbon.purple h3:before,
                        .ribbon.purple h3:after{ --color2:#6101E5; }
                        .ribbon.blue{ --color1:#1DC0E1; }
                        .ribbon.blue h3:before,
                        .ribbon.blue h3:after{ --color2:#0284F3; }
                        @media screen and (max-width:990px){ 
                           .ribbon{ margin-bottom: 50px; } 
                        }