<div class="wobbly-box wobbly-box--keyline">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget turpis in neque facilisis fermentum. Maecenas mattis, sem et pellentesque tempus, urna erat imperdiet velit, et iaculis quam libero at nulla. Phasellus tincidunt viverra purus eu eleifend. Vestibulum nunc augue, gravida non ante at, maximus tempor quam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget turpis in neque facilisis fermentum. Maecenas mattis, sem et pellentesque tempus, urna erat imperdiet velit, et iaculis quam libero at nulla. Phasellus tincidunt viverra purus eu eleifend. Vestibulum nunc augue, gravida non ante at, maximus tempor quam.</p>
</div>
.wobbly-box {
  padding: 1rem;
  margin: 1rem;
  background-image: image-url('http://localhost:4000/img/posts/wobbly-box.svg');
  background-repeat: no-repeat;
  // Declare width and height values 
  background-size: 100% 100%;
}

.wobbly-box--keyline {
  position: relative;
  
  &:before {  
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: image-url('http://localhost:4000/img/posts/wobbly-box--inverse.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 0;
    left: 0;
    // Fake the 2px stroke width using a transparent border
    border: 2px solid transparent;
    box-sizing: border-box;
  }
  
  // Make sure the contents overlay the background
  > * {
    position: relative;
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.