Tricks CSS

CSS Trick: Ribbon Atau efek pita

July 30, 2019

Kebanyakan tulisan di blog saya adalah catatan pribadi yang saya buka untuk umum. Nah pada kesempatan kali ini saya ingin mencatat sebuah trick css untuk membuat efek pita.

Sebelumnya untuk kasus seperti ini aku menggunakan gambar, akan tetapi menjadi sebuah masalah jika aku ingin membuat tulisan yang ada pada efek pitanya di buat dinamis.

Nah untuk mengatasi masalah itu solusinya adalah menggunakan css. Disini pripsip yang dilakukan adalah menambahkan border pada class yang dinamai ribbon.

Ok mari kita langsung ke coding nya. Pertama buat tag htmlnya seperti berikut ini.

<h1 class="ribbon">
        <strong class="ribbon-content">
                Selamat kamu menang!
        </strong>
</h1>

Selnjutnya untuk css seperti berikut ini :

.ribbon{
    font-size: 16px !important;
    font-weight: 100;
    font-family: Arial, Helvetica, sans-serif;
    width: 50%;
    position: relative;
    background: #794acf;
    color: white;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}

.ribbon:before, .ribbon:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #794acf;
    z-index: -1;
}

.ribbon:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent; 
}

.ribbon:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #794acf transparent transparent transparent;
    bottom: -1em;
}

.ribbon .ribbon-content:before {
    left: 0;
    border-width: 1em, 0, 0,1em;
}

.ribbon .ribbon-content:after {
    right: 0;
    border-width: 1em, 1em, 0, 0;
}

Contoh hasil nya seperti ini :

css ribbon

Untuk contoh kodingan lebih lengkapnya silahkan buka disini.

Subscribe to My Newsletter

Thank you for your interest in my blog. Sign up to my newsletter to stay current on the latest news and information me and to be the first to see new blog posts.