CSS Corner Ribbon

CSS3 RIBBONS Discount 10% U N P L U G Discount 10% Discount 10% Discount 10% Discount 10% *, :after, :before {box-sizing: unset;}section{margin:0 auto;max-width:660px;padding:0 20px}h1{font-weight:normal!important;position:relative;background:#e7e8ff;width:50%;color:#262d3d;text-align:center;padding:10px 20px;margin:75px auto 72px!important;text-transform:uppercase;border-radius:2px;line-height:28px!important;}h1:before,h1:after{content:"";position:absolute;display:block;top:-6px;border:18px solid #dad4ff;}h1:before{left:-36px;border-right-width:18px;border-left-color:transparent;}h1:after{right:-36px;border-left-width:18px;border-right-color:transparent;}h1 span:before,h1 span:after{content:"";position:absolute;display:block;border-style:solid;border-color:#A7CECC transparent transparent transparent;top:-6px;transform:rotate(180deg);}h1 span:before{left:0;border-width:6px 0 0 6px;}h1 span:after{right:0;border-width:6px 6px 0 0;}.ribbon{display:inline-block;width:48%;height:188px;position:relative;float:left;margin-bottom:30px;background-size:cover;color:white;}.ribbon span{font-size:14px;} .Back-img1{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhp3rafLoCQVe-8tdPpKXVkde0Wxk_kIxZCj2z6W9J_q71z727XGBIuMdiDi2hg0VL3oDZwETZHDfsXX0mSiZFHCHXNaiSCicENzZgKK5_Myv0uDyzgk8dIhbsOtHDKxTMx6ZVeoQV7k/s0/unplug-themesgadget-demo-style-6-1.webp); } .Back-img2{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuR8w83ba1rKbRchfH1FMirjGGFBJjLIUhzP0JJl70ZcqSStKJl1w5TN0ZNa3TtpnPPJF_XOcivUfyaJLEBIp5kAF8CJj254VdfNXPHs4wV6NLizjA9N2rW6E4hPddHOn8Z1nvYW3NbKw/s0/unplug-themesgadget-demo-style-6-2.webp); } .Back-img3{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiid9mQf6dcH-mFt5KiA8DxC0ABJI9yeVxkKdPFaHmwZNsFodkTdxM-0trMzTE8k8ilmK_3biT_GVBFbsmnjPdgujuNLuGfPTxCr6gJlnSPY-NEik7SZG4odHX30vqDgLQeICc8gK2tov0/s0/unplug-themesgadget-demo-style-6-3.webp); } .Back-img4{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKYQ-l1DI3vFsIbVrA7m6Je7xcn-0MvRXCsXFMjrEIujIZZ4qqT6OKkK9ptfoA8iw9mKpeXFtd_1-vDZ147k7fDlCpToguekh9LIjwcoLPVSoUuvBOCq6YstpT9YgumcOgujBoA0nixRg/s0/unplug-themesgadget-demo-style-6-4.webp); } .Back-img5{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4YDGhyphenhyphen77YefSaz3uN0_Tyeweylec5hodmvfyJSbSJQdmqTpMz_cfw3I0Qj4c3Se3-mg1RVcqDEfnV7S30PXiD89mn48cDSHTlsm-r9yBaBsI9q8xrw-6SNM1fNlrFfD0h4DPqYfsopEA/s0/unplug-themesgadget-demo-style-6-5.webp); } .Back-img6{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWnvuQPAzFbTzbFsm-YORbv7wkOTkIey_x83pIXKjDPzYqnSBLVnniJcGHD6Evhx889CgWUl-svJLGxKkqMcG-IesRsiXcrFPmRE67A6Z9LyPHRAsjP8vBzG_F4eFp14Ib0WZg8XI3g38/s0/unplug-themesgadget-demo-style-6-6.webp); } .Back-img1, .Back-img2, .Back-img3, .Back-img4, .Back-img5, .Back-img6{background-size: cover;}.ribbon:nth-child(even){margin-right:4%;}@media (max-width:500px){.ribbon{width:100%}.ribbon:nth-child(even){margin-right:0%;}} .ribbon1{position:absolute;top:-6px;right:10px;}.ribbon1:after{position:absolute;content:"";display:block;width:0;height:0;border-left:53px solid transparent;border-right:53px solid transparent;border-top:10px solid #8775f5;}.ribbon1 span{position:relative;display:inline-block;text-align:center;background:#8775f5;font-size:14px;line-height:1;padding:12px 8px 10px;border-top-right-radius:8px;width:90px;}.ribbon1 span:before,.ribbon1 span:after{position:absolute;content:"";display:block;}.ribbon1 span:before{background:#8775f5;height:6px;width:6px;left:-6px;top:0;}.ribbon1 span:after{background:#8775f5;height:6px;width:8px;border-radius:8px 8px 0 0;left:-8px;top:0;} .ribbon2{display:inline-block;width:60px;padding:10px 0;background:#309ba3;top:-6px;left:25px;position:absolute;text-align:center;border-top-left-radius:3px;line-height:normal;}.ribbon2:before{height:0;width:0;border-bottom:6px solid #309ba3;border-right:6px solid transparent;right:-6px;top:0;}.ribbon2:before,.ribbon2:after{content:"";position:absolute;}.ribbon2:after{height:0;width:0;border-left:30px solid #309ba3;border-right:30px solid #309ba3;border-bottom:30px solid transparent;bottom:-30px;left:0;} .ribbon3{display:inline-block;position:absolute;width:150px;height:50px;line-height:50px;padding-left:15px;background:#93476b;left:-8px;top:20px}.ribbon3:before,.ribbon3:after{content:"";position:absolute;}.ribbon3:before{height:0;width:0;border-bottom:8px solid #93476b;border-left:8px solid transparent;top:-8px;left:0;}.ribbon3:after{height:0;width:0;border-top:25px solid transparent;border-bottom:25px solid transparent;border-left:15px solid #93476b;right:-15px;} .ribbon4{position:absolute;top:15px;padding:8px 10px;background:#555f8d;box-shadow:-1px 2px 4px rgba(0,0,0,0.5);}.ribbon4:before,.ribbon4:after{position:absolute;content:"";display:block;}.ribbon4:before{width:7px;height:100%;padding:0 0 7px;top:0;left:-7px;background:inherit;border-radius:5px 0 0 5px;}.ribbon4:after{width:5px;height:5px;background:rgba(0,0,0,0.35);bottom:-5px;left:-5px;border-radius:5px 0 0 5px;} .ribbon5{display:inline-block;width:calc(100% + 20px);height:50px;line-height:50px;text-align:center;margin-left:-10px;margin-right:-10px;background:#556c83;position:relative;top:20px;}.ribbon5:before{content:"";position:absolute;height:0;width:0;border-top:10px solid #556c83;border-left:10px solid transparent;bottom:-10px;left:0;}.ribbon5:after{content:"";position:absolute;height:0;width:0;border-top:10px solid #556c83;border-right:10px solid transparent;right:0;bottom:-10px;}.wrap{width:100%;height:188px;position:absolute;top:-8px;left:8px;overflow:hidden;}.wrap:before{content:"";display:block;border-radius:8px 8px 0px 0px;width:40px;height:8px;position:absolute;right:100px;background:#5788a1;}.wrap:after{content:"";display:block;border-radius:0px 8px 8px 0px;width:8px;height:40px;position:absolute;right:0px;top:100px;background:#5788a1;} .ribbon6{display:inline-block;text-align:center;width:200px;height:40px;line-height:40px;position:absolute;top:30px;right:-50px;z-index:2;overflow:hidden;transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);border:1px dashed;box-shadow:0 0 0 3px #5788a1,0px 21px 5px -18px rgba(0,0,0,0.6);background:#5788a1;}

Mobster Demo

CSS Corner Ribbon

CSS3 RIBBONS

Mobster

Ad-Blocker Detected!

Cookies Consent

Cookies Policy