<div class="container">
  
  <div class="box box--concept">
    Here you will see how to create the famous triangles in CSS using just  <code>::after</code> or <code>::before</code> pseudo-elements.
  </div>
  
  <div class="box box--right">
    Right
  </div>

  <div class="box box--left">
    Left
  </div>

  <div class="box box--top">
    Top
  </div>

  <div class="box box--bottom">
    Bottom
  </div>
</div>
:root {
  --position-triangle: 20px;
}

.container {
  margin: 10px auto;
  width: 600px;
  padding: 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.box {
  width: 100%;
  max-width: 300px;
  border: 1px solid black;
  padding: 20px;
  margin: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
  position: relative;
  text-align: center;
  font-size: 20px;
  font-family: sans-serif;
  background-color: black;
  color: white;
  transition: all 0.3s ease-in;
}

.box--concept {
  background: blueviolet;
  font-size: 18px;
  max-width: 100%;
  font-weight: 300;
  position: relative;
  margin: 30px;
}

.box--concept::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: calc(50% - 20px);
  border-top: 20px solid blue;
  border-bottom: 20px solid green;
  border-right: 20px solid orange;
  border-left: 20px solid pink;
}

.box:hover {
  background-color: tomato;
  border-color: transparent;
}

.box--left::before,
.box--right::after,
.box--top::after,
.box--bottom::after {
    content: "";
    position: absolute;
    transition: all 0.3s ease-in;
}

.box--right::after {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid transparent;
  border-left: 10px solid black;
  right: -20px;
}

.box--right:hover::after {
  border-left: 10px solid tomato;
}

.box--left::before {
  left: -20px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid black;
}

.box--left:hover::before {
  border-right: 10px solid tomato;
}

.box--top::after {
  top: -20px;
  left: calc(50% - 10px);
  border-top: 10px solid transparent;
  border-bottom: 10px solid black;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.box--top:hover::after {
  border-bottom: 10px solid tomato;
}

.box--bottom::after {
  bottom: -20px;
  left: calc(50% - 10px);
  border-top: 10px solid black;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.box--bottom:hover::after {
  border-top: 10px solid tomato;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.