JSFiddle - React, Tailwind, and code Playground

by Vipin Patil

HTML

<p class="triangle-right left">But it could be any element you want.But it could be any element you want.But it could be any element you want.But it could be any element you want.But it could be any element you want.But it could be any element you want.</p>

CSS

/*
 Should you want to set a background colour on a containing element
 certain types of bubble effect may require you to include these
 style declarations.
 */
.content {
  position:relative;
  z-index:1;
}


/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-isosceles {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  color:#000;
  background:#f3961c; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
  background:-moz-linear-gradient(#f9d835, #f3961c);
  background:-o-linear-gradient(#f9d835, #f3961c);
  background:linear-gradient(#f9d835, #f3961c);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

/* Variant : for top positioned triangle
------------------------------------------ */

.triangle-isosceles.top {
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835));
  background:-moz-linear-gradient(#f3961c, #f9d835);
  background:-o-linear-gradient(#f3961c, #f9d835);
  background:linear-gradient(#f3961c, #f9d835);
}

/* Variant : for left/right positioned triangle
------------------------------------------ */

.triangle-isosceles.left {
  margin-left:50px;
  background:#f3961c;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-isosceles.right {
  margin-right:50px;
  background:#f3961c;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

/*...