「border」プロパティで三角形と吹き出しなどのあしらいを作る

.box{
  width: 50px; height: 50px;
  
  border:20px solid;
  border-color:
    black red black red;
}

ボーダの接地面が斜めになるので

.box{
  width: 0px; height: 0px;
  
  border:20px solid;
  border-color:
    black red black red;
}

幅を高さ0にすると三角形が4つに

.box{
  width: 0px; height: 0px;
  
  border:20px solid transparent;
  border-top-color: black;
}

上部の三角形以外を透過にする

h2 {
  position:relative;
  padding:1rem;
  background-color:black;
  color:white;
}

h2:after{
  position:absolute;
  top:100%;
  left:50%;
  width:0px;
  height:0px;
  transform:translateX(-50%);
  border:10px solid transparent;
  border-top-color:black;
  content:'';
}

h2 {
  display: inline-block;
  position:relative;
  padding:0 3rem;
  height:70px;
  line-height:70px;
  background-color:black;
  color:white;
}

h2:after{
  position:absolute;
  top:0;
  right:-1px;
  width:0px;
  height:0px;
  border:35px solid transparent;
  border-right:25px solid #efefef;
  content:'';
}

h2 {
  display: inline-block;
  position:relative;
  padding:0 3rem;
  height:70px;
  line-height:70px;
  background-color:black;
  color:white;
}

h2:after{
  position:absolute;
  bottom:-1px;
  right:-1px;
  width:0px;
  height:0px;
  border-width: 0px 0px 20px 20px;
  border-style: solid;
  border-color: transparent transparent #efefef #55c5f4;
  content:'';
}