How add a triangle as a pointer onto an html element using pure css and html

Question

I am trying to make a tooltip using html and css. The tooltip would be a rectangle that has a triangle on either the left or right hand sides. A visual example of this is seen below (I'm not concerned about the color or shadow, just that the triangle appears.

While I have been successful making a triangle using:

    #triangle-left {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-right: 100px solid red;
      border-bottom: 50px solid transparent;
    }

When I attempt to append this using a pseudo-element to a div nothing happens. For example, I have tried:

.triangleTest {
  height: 100px;
  width: 100px;
}

.triangleTest:after {
    width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-right: 100px solid red;
      border-bottom: 50px solid transparent;
}

<div class="triangleTest"></div>

But nothing expect the square div appears on the screen. How can I create add a triangle to a div like in the image?

score 2 · Accepted Answer · answered Dec 31 '19 at 00:08

.triangleTest {
 position: relative;
 background: lightgray;
 border-radius: .4em;
  height: 100px;
  width: 100px;
  text-align: center;
}
.triangleTest h1 {
padding-top: 25px;
}
.triangleTest:after {
 content: '';
 position: absolute;
 left: 0;
 top: 50%;
 width: 0;
 height: 0;
 border: 0.563em solid transparent;
 border-right-color: lightgray;
 border-left: 0;
 margin-top: -0.562em;
 margin-left: -0.562em;
}

<div class="triangleTest">
<h1>Hello</h1>
</div>

How add a triangle as a pointer onto an html element using pure css and html

1 Answers1