*, *::after, *::before {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
 padding: 2em;
}

.tooltip {
 position: relative;
 background-color: silver;
 width: 200px;
 height: 50px;
 border-radius: 0.25em;
 display: flex;
 justify-content: center;
 align-items: center;
 border: 1px solid grey;
}

// .triangle { // using the border hack
//  display: block;
//  height: 0px;
//  width: 0px;
//  border: 10px solid transparent;
//  border-top-color: silver;
//  position: absolute;
//  bottom: -20px;
//  left: calc(50% - 10px);
// }

.triangle { // using clip-path
 display: block;
 height: 20px;
 width: 20px;
 background-color: inherit;
 border: inherit;
 position: absolute;
 bottom: -10px;
 left: calc(50% - 10px);
 clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
 transform: rotate(-45deg);
 border-radius: 0 0 0 0.25em;
}