ribbon style : demo 10

                        

                            

                                

                                    
This is a ribbon
                                
                            
                        
                    

                        :root{
                            --white:#fff;
                            --background:#eee; 
                            --color1:#e67e22;
                            --color2:#d35400;
                        }
                        .ribbon{
                            color: var(--white);
                            background: var(--background);
                            font-family: "Pridi", serif;
                            text-align: center;
                            padding: 60px 0;
                            margin: 0 15px;
                        }
                        .ribbon h3{
                            background: var(--color1);
                            font-size: 22px;
                            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;
                            bottom: auto;
                            top: -15px;
                            background: linear-gradient(to top right,var(--color2) 49%, transparent 50%);
                        }
                        .ribbon.pink{ --color1: #e056fd; }
                        .ribbon.pink h3:before,
                        .ribbon.pink h3:after{ --color2:#be2edd; }
                        .ribbon.yellow{ --color1:#f1c40f; }
                        .ribbon.yellow h3:before,
                        .ribbon.yellow h3:after{ --color2:#f39c12; }
                        .ribbon.purple{ --color1:#686de0; }
                        .ribbon.purple h3:before,
                        .ribbon.purple h3:after{ --color2:#4834d4; }
                        @media screen and (max-width:990px){ 
                            .ribbon{ margin-bottom: 50px; } 
                        }