在 :after 中创建箭头并插入边框半径

body {
  background: black;
}

.header {
  background: rgba(235,238,243,1);
  height: 40px;
  width: 100%;
  position: relative;
  margin-top: 50px;
}

/* Left flange */
.header:before {
  content: "";
  position: absolute;
  background: none;
  bottom: 100%;
  left: 50%;
  border: 25px solid black;
  border-bottom-right-radius: 25px;
  transform: translateX(-137%);
  z-index: 2;
}

/* Right flange */
.header:after {
  content: "";
  position: absolute;
  background: none;
  bottom: 100%;
  left: 50%;
  border: 25px solid black;
  border-bottom-left-radius: 25px;
  transform: translateX(37%);
  z-index: 2;
}

/* Arrow base */
.header-helper {
  background: white;
  z-index: 1;
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translateX(-50%);
}

/* Up arrow */
.header-helper:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border: 25px solid black;
  border-bottom-color: transparent;
  transform: translateX(-50%);
  background: white;
  margin-bottom: 8px;
  z-index: 2;
}

<div class="header"><div class='header-helper'></div></div>