<svg width="0" height="0"><clipPath id="quoteClipPath" clipPathUnits="objectBoundingBox"><polygon points="0.02 0.04, 1 0, 1 1, 0 0.94, 0.02 0.04"/></clipPath></svg>

<div class="quote">
  Their idea was to buy special lighter oars and a bespoke trolley to launch a boat enabling breast cancer survivors learning how to row, to do so independently.
  <span class="badge"></span>
</div>
@import "nib"

green = #16b0ad
light-blue = #cfebf2

*
  box-sizing border-box

.quote
  margin 50px auto 0
  size 545px 180px
  position relative
  color white
  padding 25px 37px
  font-weight 100
  font-size 21px
  letter-spacing 0.05em
  line-height 32px

  &:before
    content ""
    display block
    absolute top left
    background green
    -webkit-clip-path polygon((11px / @width * 100)% (8px / @height * 100)%, 100% 0, 100% 100%, 0 ((@height - 11px) / @height * 100)%)
    clip-path url('#quoteClipPath')
    size 100%
    z-index -1

  &:after
    content ""
    display block
    absolute top 100% left 70px
    margin-top -11px
    border-width 33px (40px - 14px) 0 14px
    border-style solid
    border-color green transparent transparent
    size 0

.badge
  absolute bottom -22px right
  display block
  size 68px 94px
  background-image url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOC41MDkiIGhlaWdodD0iNTIuOTUyIj48cGF0aCBmaWxsPSIjY2ZlYmYyIiBkPSJNOS4zNDUgOC45NzNjMi43MS0yLjY0IDYuMjQ3LTQuMDkzIDkuOTYyLTQuMDkzdi0uNmMtMy44NjIgMC03LjU0IDEuNTEtMTAuMzU2IDQuMjU1LTMuMDQgMi45NjMtNC43OCA3LjE0OC00Ljc4IDExLjQ4aC41NzhjMC00LjE2NyAxLjY3Ny04LjE5MiA0LjYwMy0xMS4wNDJtMjIuNTI3IDExLjA0YzAtNy4yMDgtNS42MjUtMTMuMDUzLTEyLjU2NC0xMy4wNTMtMy4zMjMgMC02LjM0NiAxLjM0LTguNTkzIDMuNTMtMi40NDcgMi4zODItMy45NyA1Ljc2OC0zLjk3IDkuNTI0IDAgNy4yMSA1LjYyMiAxMy4wNTYgMTIuNTYgMTMuMDU2IDYuOTQgMCAxMi41NjMtNS44NDQgMTIuNTYzLTEzLjA1Nm02LjQgMy4xMjJsLTEuNzkyIDEuMTY4IDEuMDkgMS44ODYtMS45NDYuODYuNzkgMi4wNC0yLjA1LjUzMy40NzMgMi4xNDQtMi4xMDguMTkzLjE0NCAyLjE5My0yLjExLS4xNS0uMTg2IDIuMTktMi4wNjQtLjQ5My0uMDQ3LjIgMy4zNiAxNC41LTUuOTI0LTIuMzEtNC4yNiA0Ljg2LTIuMzktMTEuMjctMS4yOCA4LjA5OC00LjE1LTQuMTQ0LTUuNzYzIDIuNzIzIDIuMTUtMTEuNzdMMTAgMzUuN2wtMi4wNi40OTItLjE4Ny0yLjE5LTIuMTEuMTUuMTQ1LTIuMTkyLTIuMTEtLjE5My40NzQtMi4xNDRMMi4xIDI5LjA5bC43OS0yLjA0LTEuOTQ0LS44NiAxLjA4Ny0xLjg4NkwuMjQgMjMuMTM2bDEuMzU2LTEuNjg1TDAgMjAuMDFsMS41OTMtMS40NDRMLjIzNiAxNi44OGwxLjc5NC0xLjE3LTEuMDktMS44ODYgMS45NDYtLjg2LS43OS0yLjA0IDIuMDUyLS41MzQtLjQ3NC0yLjE0MyAyLjExLS4xOTQtLjE0Ny0yLjE5MyAyLjExLjE1LjE4Ni0yLjE5IDIuMDYyLjQ5Mi41MTUtMi4xMzIgMS45NjIuODIyLjgzLTIuMDIzIDEuODE0IDEuMTNMMTYuMjQyLjI0bDEuNjIyIDEuNDFMMTkuMjU0IDBsMS4zOSAxLjY1NyAxLjYyMi0xLjQxTDIzLjM5IDIuMTEgMjUuMjA1Ljk4IDI2LjAzMyAzbDEuOTYzLS44MjIuNTE0IDIuMTMyIDIuMDYzLS40OS4xODYgMi4xODggMi4xMS0uMTUtLjE1IDIuMTkzIDIuMTEuMi0uNDc3IDIuMTQzIDIuMDUyLjUzNC0uNzkgMi4wNCAxLjk0NC44Ni0xLjA4NiAxLjg4NiAxLjc5MiAxLjE2NS0xLjM1OCAxLjY4NkwzOC41IDIwLjAxbC0xLjU5NSAxLjQ0NSAxLjM2IDEuNjg3eiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yNC40ODUgMTMuMjJsLTYuNTEzIDEwLjc5LTQuOTQ2LTIuOTg0LTEuNTg3IDIuNjMgNC45NCAyLjk4NSAxLjEyMy42OCAxLjQ2Ljg4NyA4LjEtMTMuNDJ6Ii8+PC9zdmc+')
  background-size contain
  background-repeat no-repeat
  background-position center center
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.