each dir1 in [ "top", "bottom" ]
    each dir2 in [ "left", "right" ]
        a.c-ribbon(href="https://github.com/explosion" target="_blank" class="c-ribbon--" + dir1 + " c-ribbon--" + dir2) View on GitHub

.container
    h1 #[span CSS-only]#[br]corner ribbons
View Compiled
$theme-bg: #1e1935
$theme-bg2: lighten(#1e1935, 30)
$theme-color: #fff

$ribbon-width: 300px

.c-ribbon
    position: fixed
    display: block
    font: bold 0.75rem "Poppins", Arial, sans-serif
    background: $theme-color
    color: $theme-bg
    text-decoration: none
    padding: 5px
    text-align: center
    width: $ribbon-width
    z-index: 100
    
    &:hover
        box-shadow: 5px 5px 5px darken($theme-bg, 5)
    
    @each $dir in (left, right)
        &.c-ribbon--#{$dir}
            #{$dir}: -$ribbon-width / 3
    
    @each $dir in (top, bottom)
        &.c-ribbon--#{$dir}
            #{$dir}: $ribbon-width / 6
    
    &.c-ribbon--top.c-ribbon--left,
    &.c-ribbon--bottom.c-ribbon--right
        transform: rotate(-45deg)

    &.c-ribbon--bottom.c-ribbon--left,
    &.c-ribbon--top.c-ribbon--right
        transform: rotate(45deg)

h1
    flex: 100%
    font: bold 60px/#{1.25} "Poppins", Arial, sans-serif
    margin: 1.5em 0
    color: $theme-bg2
    text-align: center

    span
        color: rgba($theme-color, 0.85)

.container
    width: 85%
    max-width: 700px

body
    background: $theme-bg
    color: $theme-color
    width: 100vw
    height: 100vh
    display: flex
    justify-content: center
    align-items: center
    
*
    box-sizing: border-box
    -webkit-font-smoothing: antialiased
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Poppins:400,700

External JavaScript

This Pen doesn't use any external JavaScript resources.