如何设计具有方形和底端三角形的响应菜单

Question

我如何在此设计中使用CSS设计响应式设计。此红色底端为三角形的红色框。如何使其成为菜单。我从此站点获得了此设计。

link of site

我从另一个so页面获取了代码

.pentagon {
  height: 50px;
  width: 78px;
  background: #3a93d0;
  position: relative;
}
.pentagon:after {
  border: 39px solid #3a93d0;
  border-top-width: 15px;
  border-color: #3a93d0 transparent transparent transparent;
  position: absolute;
  top: 50px;
  content: '';
}

<div class="pentagon"></div>

但是我听不懂代码的后面部分。任何人都可以向我解释代码的后面部分

Answer 1

.pentagon {
  height: 50px;
  width: 78px;
  background: #3a93d0;
  position: relative;
}
.pentagon:after {
  border: 39px solid #3a93d0;
  border-top-width: 15px;
  border-color: #3a93d0 transparent transparent transparent;
  position: absolute;
  top: 50px;
  content: '';
}

<div class="pentagon"></div>