كيف تنشئ شريطًا (Ribbon) بسيطًا وخفيفًا بـ HTML/CSS (دون صورة JPG/PNG)

إليك مقطعًا بسيطًا وخفيفًا من HTML وCSS ينشئ خلفية على شكل شريط مع نص، دون الحاجة إلى أي صورة JPG أو PNG.

عرض توضيحي: شريط CSS لموقعك

HTML

انسخ الشيفرة أدناه والصقها في مستند HTML الخاص بك.

<div class="ribbon">
    <span class="ribbon-text">My Ribbon</span>
</div>

CSS

انسخ الشيفرة أدناه والصقها في ملف CSS الخاص بك.

.ribbon {
    position: relative;
    background: blue;
    text-align: center;
    z-index: 1;
    width: 240px;
    height: 52px;
    margin: 0 auto;
}
.ribbon-text {
    position: relative;
    display: block;
    font-size: 2em;
    color: white;
}
.ribbon:before {
    content: '';
    border: 26px solid blue;
    border-left-color: transparent;
    border-left-width: 14px;
    position: absolute;
    top: 0;
    left: -20px;
}
.ribbon:after {
    content: '';
    border: 26px solid blue;
    border-right-color: transparent;
    border-right-width: 21px;
    position: absolute;
    top: 0;
    right: -27px;
}

يمكنك تعديل لون الشريط وحجمه. لتغيير اللون، استبدل blue في background وفي تصريحي border معًا. وإذا غيّرت الارتفاع، فاضبط عرض الحد 26px في :before و:after على نصف الارتفاع الجديد. استمتع!