Corner Ribbon HTML And CSS With Best Example

Corner Ribbon HTML And CSS With Best Example, in this post example you will get a top left corner ribbon example. using CSS and HTML to make corner ribbon is very simple than the other tool.

Using HTML and CSS make a corner ribbon in your project, look at the given corner ribbon example, I used HTML code and CSS tricks for the show the top left corner ribbon.

This is a simple HTML div tage for fixing ribbon fit to the left top corner. we will add a span tag inside the div tag. also will give some class names to this both tags.

<div class="box">
    <div class="ribbon ribbon-top-left"><span>Top Left</span></div>
</div>

This CSS trick is for the top left corner of the ribbon added. You can make changes according to your requirement in different ways like color height width etc.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f0f0f0;
}
.box {
    position: relative;
    max-width: 600px;
    width: 90%;
    height: 400px;
    background: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,.1);
}

.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
}
.ribbon::before,
.ribbon::after {
position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid red;
}
.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 15px 0;
    background-color: red;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    color: #fff;
    font: 700 18px/1 'Lato', sans-serif;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase;
    text-align: center;
}

.ribbon-top-left {
    top: -10px;
    left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
    border-top-color: transparent;
    border-left-color: transparent;
}
.ribbon-top-left::before {
    top: 0;
    right: 0;
}
.ribbon-top-left::after {
    bottom: 0;
    left: 0;
}
.ribbon-top-left span {
    right: -25px;
    top: 30px;
    transform: rotate(-45deg);
}

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)