<div class="container"><div class="ribbon" id="ribbon">Express</div></div>

<div class="controls">
  <div>
    <label for="content">Content</label>
    <input type="text" id="content" value="Express" />
  </div>
  <div>
    <label for="padding">Padding (em)</label>
    <input type="number" step="0.1" min="0" max="5" value="2" id="padding" />
  </div>
</div>


/**
 * 1. Positioning context for the ribbon.
 * 2. Prevent the edges of the ribbon from being visible outside the
 *    box.
 */
.container {
  position: relative; /* 1 */
  overflow: hidden; /* 2 */
  
  /* Demo styles */
  width: 20em;
  height: 10em;
  border-radius: 0.25em;
  margin: 8em auto 2em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

/**
 * 1. Start absolutely positioned in the top right corner of the
 *    container.
 * 2. Horizontal padding is considered in the ribbon placement.
 *    The larger the ribbon (text + padding), the lower in the
 *    container it might have to be.
 * 3. Make sure the content is centered within the ribbon itself.
 * 4. Position the ribbon correctly based on its width, as per
 *    the following formula: `cos(45 * π / 180) * 100%`.
 */
.ribbon {
  position: absolute; /* 1 */
  top: 0; /* 1 */
  right: 0; /* 1 */
  padding: 0 2em; /* 2 */
  text-align: center; /* 3 */
  transform:
    translateY(-100%)
    rotate(90deg)
    translateX(70.71067811865476%)
    rotate(-45deg); /* 4 */
  transform-origin: bottom right; /* 4 */
  
  /* Demo styles */
  text-transform: uppercase;
  font-weight: 500;
  font-size: 75%;
  letter-spacing: 1px;
  background-color: #d3f5f6;
  color: rgba(0, 0, 0, 0.7);
}

/* Demo styles */

* {
  box-sizing: border-box;
}

body {
  font: 125% / 1.5 sans-serif;
}

.controls {
  width: 21em;
  margin: auto;
  display: flex;
}

.controls > * {
  padding: 0.5em;
  flex: 1 1 50%;
}

input {
  width: 100%;
  padding: 0.25em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

label {
  font-size: 75%;
  text-transform: uppercase;
  color: darken(#d3f5f6, 55%);
}

document.addEventListener('DOMContentLoaded', () => {
  const ribbon = document.querySelector('#ribbon')

  document.querySelector('#content').addEventListener('change', event => {
    console.log(event.target.value)
    ribbon.innerText = event.target.value
  }, false)

  document.querySelector('#padding').addEventListener('change', event => {
    ribbon.style.paddingLeft = event.target.value + 'em'
    ribbon.style.paddingRight = event.target.value + 'em'
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.