创建一个凸出的国家标志，使用CSS或JS

Question

我正在尝试使用2018年世界杯资格欧洲区（使用我附上的图像）中使用的设计创建2018年世界杯页面。

如果我对其中一些观点有误，请纠正我：

1. 在 EUROPEAN ZONE 标题中，我可以用一个梯形的圆形边框实现这一目标。
2. 对于标题横幅，它使用不均匀的边框div。这将与国家/地区名称一样div。我尝试将border-radius与/运算符一起使用，也许有更好的解决方案（如果有的话）。 此外，如果您可以在div之上看到有一个小镜头眩光（不确定这是否是正确的术语）。
3. 对于所有横幅div，我可以添加一些渐变背景颜色，使其看起来具有3D效果并添加一些光泽效果。
4. 对于深色透明背景，我可以使用border-radius进行相同操作。可能使用border选择器进行凹陷:after。

这部分是我被困住的地方：我不确定如何重新创建具有凸形状的国旗，但它看起来像包裹div（可能添加盒阴影效果）并添加光泽效果。

我假设我只能用CSS实现这一点，或者可能只是一点点Javascript。但是没有jQuery，因为我打算在反应中创建它。

这是我到目前为止所得到的：

body {
  background: white;
}

#wrapper {
  border: 1px solid black;
  border-radius: 20px 20px 40px 40px / 40px 40px 90px 90px;
  display: flex;
  height: 40px;
  align-items: center;
}

#flag {
  width: 70px;
  height: 100%;
  background: red;
  border-radius: 20px 20px 40px 40px / 40px 40px 90px 90px;
  margin: 0 20px;
}

#flag:after {
  content: '';
  background: white;
  position: relative;
  height: 100%;
  width: 30px;
  display: block;
  left: 44px;
  border-radius: 20px 20px 40px 40px / 40px 40px 90px 90px;
}

<div id="wrapper">
  <div id="flag"></div>
  <div id="team">Country Name</div>
</div>

View on JSFiddle