<div class='inline-flex flex--center-cross flex--column'>
  <div class='px6 py6 bg-darken75 color-white align-center  round txt-bold txt-s'>Hello world!</div>
  <span class='triangle triangle--d'></span>
</div>

<div class='inline-flex flex--center-cross'>
  <span class='triangle triangle--l'></span>
  <div class='px6 py6 round txt-bold txt-s align-center bg-darken75 color-white'>Hello world!</div>
</div>

<div class='inline-flex flex--center-cross'>
  <div class='px6 py6 round txt-bold txt-s align-center bg-darken75 color-white'>Hello world!</div>
  <span class='triangle triangle--r'></span>
</div>

<div class='inline-flex flex--center-cross flex--column'>
  <div class='relative px18 py18 round txt-bold txt-s align-center bg-darken75 color-white'>
    <button class='absolute top right'>
      <svg class='icon link color-white mt3 mr3'><use xlink:href='#icon-close'></use></svg>
    </button>
    Hello world!
  </div>
  <span class='triangle triangle--d color-darken75'></span>
</div>