<div class='example-block'>
    <div class='content'>1</div>
</div>

<div class='example-block'>
    <div class='content -big'>2</div>
</div>

<div class='example-block'>
    <div class='content -very-big'>3</div>
</div>

<div class='example-block'>
    <div class='content -very-very-big'>4</div>
</div>

<div class='example-block'>
    <div class='content -very-very-very-big'>5</div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap');

html {
    font-family: 'Balsamiq Sans', cursive;
    
    // Max font size = 24px
    // Min font-size = 14px
    // Breakpoints: 400px and 1200px
    // font-size = (14px + (24 - 14) * ((100vw - 400px) / ( 1200 - 400)))
    font-size: ~'calc(14px + ((100vw - 400px) / 80))';

    @media screen and (max-width: 400px) {
        font-size: 14px;
    }

    @media screen and (min-width: 1200px) {
        font-size: 24px;
    }

    line-height: 1.50;
}


body {
    background: #ffe0b5;
}


.example-block {
    background: #8a6552;
    margin: 1rem 0;
    
    &::after {
        content: '';
        display: table;
        clear: both;
    }
    
    > .content {
        position: relative;
        float: right;
        min-width: 7rem;
        text-align: center;
        padding: 0 1rem 0 3rem;
        font-size: 2rem;
        line-height: 2;
        background: #5bc0eb;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 2rem 50%);
        
        &.-big {
            font-size: 3rem;
        }
        
        &.-very-big {
            font-size: 5rem;
        }
        
        &.-very-very-big {
            font-size: 7rem;
        }
        
        &.-very-very-very-big {
            font-size: 10rem;
        }
    }
}