<p class="slanted">Dynamically incentivize innovative ROI vis-a-vis interoperable opportunities. Uniquely morph exceptional action items after enabled manufactured products. Appropriately architect web-enabled products without high-payoff alignments. Credibly myocardinate cooperative interfaces before functionalized e-services. Continually drive multifunctional.</p>
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);
body {
  background-color: #3f3e3e;

p {
  color: #ffffff;
  font-family: 'Libre Baskerville', sans-serif;
  font-size: 21px;
  letter-spacing: .025em;
  line-height: 32px;
  overflow: hidden;
  padding-bottom: 5px;
  width: 550px;

.push {
  background-color: #ff0000;
  clear: left;
  float: left;
  // Same as the text's line-height: 
  height: 32px;
View Compiled
  // String.repeat is only available in ECMA6, so most browsers don't have it.
if (!String.prototype.repeat) {
  String.prototype.repeat = function(num) {
    return new Array(num + 1).join(this);

$('.slanted').each(function() {

  var slantedText = $(this);
  // Wrap inside the paragraph to keep it isolated from the "push" spans we're about to add
    .wrapInner('<span class="slanted_inner"></span>')
    // Add the extra spans required 
    .prepend('<span class="push"></span>'.repeat(20));

  // Push the content over a little more each row
  var push = $('.push', slantedText);

  push.each(function(i) {
    // include number is how wide each step is
    var incline = 12;
    // iterate through each "push" span, multiplying the position by the incline.
    $(this).css('width', (++i * incline) + 'px');

  // Set the height of the pullquote to be the height of its text.
  // Pairing this with overflow: hidden in the CSS will keep any extra "push" spans from showing.
  function setSlantedTextHeight(slantedText) {
    var slantedTextInner = $('.slanted_inner', slantedText);
    // Get the height of the inner text
    var height = parseInt(slantedTextInner.height());
    slantedText.css('height', height);

  // Call height function


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js