Grid CSS border arrow bubbles

In this example below you will see how to do a Grid CSS border arrow bubbles with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mayko780, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mayko780 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Grid CSS border arrow bubbles</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="body">
  <div class="grid">

    <div class="bubble bubble-arrow-s">
      <div class="bubble-box">
        <h2>South arrow</h2>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. </p>
      <p>Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>

    <div class="bubble bubble-arrow-w">
      <div class="bubble-box">
        <h2>West arrow</h2>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. </p>
      <p>Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>

    <div class="bubble bubble-arrow-n">
      <div class="bubble-box">
        <h2>North arrow</h2>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. </p>
      <p>Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>
    
    <div class="bubble bubble-arrow-e">
      <div class="bubble-box">
        <h2>East arrow</h2>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. </p>
      <p>Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>

    <div class="bubble bubble-arrow-w--t">
      <div class="bubble-box">
        <h2>West top arrow</h2>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. </p>
      <p>Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>
    
    <div class="bubble bubble-arrow-w--b">
      <div class="bubble-box">
        <h2>West bottom arrow</h2>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. </p>
      <p>Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>

    
    <div class="bubble bubble-arrow-e--t">
      <div class="bubble-box">
        <h2>East top arrow</h2>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. </p>
      <p>Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>
    
    <div class="bubble bubble-arrow-e--b">
      <div class="bubble-box">
        <h2>East bottom arrow</h2>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. </p>
      <p>Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>

    <div class="bubble bubble-arrow-n--l">
      <div class="bubble-box">
        <h2>North left arrow</h2>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. </p>
      <p>Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>
    
    <div class="bubble bubble-arrow-n--r">
      <div class="bubble-box">
        <h2>North right arrow</h2>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. </p>
      <p>Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>

    <div class="bubble bubble-arrow-s--l">
      <div class="bubble-box">
        <h2>South left arrow</h2>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. </p>
      <p>Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>
    
    <div class="bubble bubble-arrow-s--r">
      <div class="bubble-box">
        <h2>South right arrow</h2>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. </p>
      <p>Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>
    
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mayko780/grid-css-border-arrow-bubbles-RjXKbR */
.bubble {
  display: grid;
  grid-gap: 0;
  grid-template-areas: "nw n ne" "w  c  e" "sw s se";
  grid-template-rows: 0 auto 0;
  grid-template-columns: 0 auto 0;
}
.bubble.bubble-arrow-n {
  grid-template-rows: 20px auto 0;
}
.bubble.bubble-arrow-n .bubble-box {
  grid-area: c;
  border-radius: 20px;
  background: #fff;
  border: 10px solid #444;
}
.bubble.bubble-arrow-n:before {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: n;
  border-top: 0;
  border-bottom: 20px solid #444;
}
.bubble.bubble-arrow-n:after {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: n;
  top: 12.5px;
  border-top: 0;
  border-bottom: 20px solid #fff;
}
.bubble.bubble-arrow-s {
  grid-template-rows: 0 auto 20px;
}
.bubble.bubble-arrow-s .bubble-box {
  grid-area: c;
  border-radius: 20px;
  background: #fff;
  border: 10px solid #444;
}
.bubble.bubble-arrow-s:before {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: s;
  border-bottom: 0;
  border-top: 20px solid #444;
}
.bubble.bubble-arrow-s:after {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: s;
  bottom: 12.5px;
  border-bottom: 0;
  border-top: 20px solid #fff;
}
.bubble.bubble-arrow-e {
  grid-template-columns: 0 auto 20px;
}
.bubble.bubble-arrow-e .bubble-box {
  grid-area: c;
  border-radius: 20px;
  background: #fff;
  border: 10px solid #444;
}
.bubble.bubble-arrow-e:before {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: e;
  border-right: 0;
  border-left: 20px solid #444;
}
.bubble.bubble-arrow-e:after {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: e;
  right: 12.5px;
  border-right: 0;
  border-left: 20px solid #fff;
}
.bubble.bubble-arrow-w {
  grid-template-columns: 20px auto 0;
}
.bubble.bubble-arrow-w .bubble-box {
  grid-area: c;
  border-radius: 20px;
  background: #fff;
  border: 10px solid #444;
}
.bubble.bubble-arrow-w:before {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: w;
  border-left: 0;
  border-right: 20px solid #444;
}
.bubble.bubble-arrow-w:after {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: w;
  left: 12.5px;
  border-left: 0;
  border-right: 20px solid #fff;
}
.bubble.bubble-arrow-w--t {
  grid-template-columns: 40px auto 0;
}
.bubble.bubble-arrow-w--t .bubble-box {
  grid-area: c;
  border-radius: 0px 20px 20px 20px;
  background: #fff;
  border: 10px solid #444;
}
.bubble.bubble-arrow-w--t:before {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: w;
  border: 20px solid transparent;
  margin-top: 0;
  border-right: 20px solid #444;
  border-top: 20px solid #444;
}
.bubble.bubble-arrow-w--t:after {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: w;
  border: 20px solid transparent;
  margin-top: 10px;
  left: 25px;
  border-right: 20px solid #fff;
  border-top: 20px solid #fff;
}
.bubble.bubble-arrow-w--b {
  grid-template-columns: 40px auto 0;
}
.bubble.bubble-arrow-w--b .bubble-box {
  grid-area: c;
  border-radius: 20px 20px 20px 0px;
  background: #fff;
  border: 10px solid #444;
}
.bubble.bubble-arrow-w--b:before {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: w;
  border: 20px solid transparent;
  margin-bottom: 0;
  border-right: 20px solid #444;
  border-bottom: 20px solid #444;
}
.bubble.bubble-arrow-w--b:after {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: w;
  border: 20px solid transparent;
  margin-bottom: 10px;
  left: 25px;
  border-right: 20px solid #fff;
  border-bottom: 20px solid #fff;
}
.bubble.bubble-arrow-e--t {
  grid-template-columns: 0 auto 40px;
}
.bubble.bubble-arrow-e--t .bubble-box {
  grid-area: c;
  border-radius: 20px 0px 20px 20px;
  background: #fff;
  border: 10px solid #444;
}
.bubble.bubble-arrow-e--t:before {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: e;
  border: 20px solid transparent;
  margin-top: 0;
  border-left: 20px solid #444;
  border-top: 20px solid #444;
}
.bubble.bubble-arrow-e--t:after {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: e;
  border: 20px solid transparent;
  margin-top: 10px;
  right: 25px;
  border-left: 20px solid #fff;
  border-top: 20px solid #fff;
}
.bubble.bubble-arrow-e--b {
  grid-template-columns: 0 auto 40px;
}
.bubble.bubble-arrow-e--b .bubble-box {
  grid-area: c;
  border-radius: 20px 20px 0px 20px;
  background: #fff;
  border: 10px solid #444;
}
.bubble.bubble-arrow-e--b:before {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: e;
  border: 20px solid transparent;
  margin-bottom: 0;
  border-left: 20px solid #444;
  border-bottom: 20px solid #444;
}
.bubble.bubble-arrow-e--b:after {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: e;
  border: 20px solid transparent;
  margin-bottom: 10px;
  right: 25px;
  border-left: 20px solid #fff;
  border-bottom: 20px solid #fff;
}
.bubble.bubble-arrow-n--l {
  grid-template-rows: 40px auto 0;
}
.bubble.bubble-arrow-n--l .bubble-box {
  grid-area: c;
  border-radius: 0px 20px 20px 20px;
  background: #fff;
  border: 10px solid #444;
}
.bubble.bubble-arrow-n--l:before {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: n;
  border: 20px solid transparent;
  margin-left: 0;
  border-bottom: 20px solid #444;
  border-left: 20px solid #444;
}
.bubble.bubble-arrow-n--l:after {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: n;
  border: 20px solid transparent;
  margin-left: 10px;
  top: 25px;
  border-bottom: 20px solid #fff;
  border-left: 20px solid #fff;
}
.bubble.bubble-arrow-n--r {
  grid-template-rows: 40px auto 0;
}
.bubble.bubble-arrow-n--r .bubble-box {
  grid-area: c;
  border-radius: 20px 0px 20px 20px;
  background: #fff;
  border: 10px solid #444;
}
.bubble.bubble-arrow-n--r:before {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: n;
  border: 20px solid transparent;
  margin-right: 0;
  border-bottom: 20px solid #444;
  border-right: 20px solid #444;
}
.bubble.bubble-arrow-n--r:after {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: n;
  border: 20px solid transparent;
  margin-right: 10px;
  top: 25px;
  border-bottom: 20px solid #fff;
  border-right: 20px solid #fff;
}
.bubble.bubble-arrow-s--l {
  grid-template-rows: 0 auto 40px;
}
.bubble.bubble-arrow-s--l .bubble-box {
  grid-area: c;
  border-radius: 20px 20px 20px 0px;
  background: #fff;
  border: 10px solid #444;
}
.bubble.bubble-arrow-s--l:before {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: s;
  border: 20px solid transparent;
  margin-left: 0;
  border-top: 20px solid #444;
  border-left: 20px solid #444;
}
.bubble.bubble-arrow-s--l:after {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: s;
  border: 20px solid transparent;
  margin-left: 10px;
  bottom: 25px;
  border-top: 20px solid #fff;
  border-left: 20px solid #fff;
}
.bubble.bubble-arrow-s--r {
  grid-template-rows: 0 auto 40px;
}
.bubble.bubble-arrow-s--r .bubble-box {
  grid-area: c;
  border-radius: 20px 20px 0px 20px;
  background: #fff;
  border: 10px solid #444;
}
.bubble.bubble-arrow-s--r:before {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: s;
  border: 20px solid transparent;
  margin-right: 0;
  border-top: 20px solid #444;
  border-right: 20px solid #444;
}
.bubble.bubble-arrow-s--r:after {
  position: relative;
  z-index: 10;
  justify-self: start;
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  border: 20px solid transparent;
  grid-area: s;
  border: 20px solid transparent;
  margin-right: 10px;
  bottom: 25px;
  border-top: 20px solid #fff;
  border-right: 20px solid #fff;
}

body {
  height: 100%;
  background-color: #333;
}

.grid {
  padding-top: 4em;
  margin: auto;
  max-width: 350px;
}

h2 {
  font-size: 1em;
  text-align: center;
}

.bubble {
  margin-bottom: 4em;
  -webkit-filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.4));
          filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.4));
}
.bubble .bubble-box {
  padding: 10px 20px;
}

Comments