两侧的功能区/标志形状与CSS

Question

我一直在尝试在CSS中使用某种带状旗帜样式，但我还没有能够做到这一点，我想知道是否有人可以指出我，如果知道任何有关如何使用的好教程这些类型的形状

这就是我想要实现的目标

Answer 1

＆＃13;

＆＃13;

div {
  background-color: #AC4244;
  position: relative;
  height: 40px;
  width: 100%;
}
div:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 5px;
  border-color: transparent transparent transparent #ffffff;
  position: absolute;
  left: 0;
  top: 0;
}
div:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 5px 20px 0;
  border-color: transparent #ffffff transparent transparent;
  position: absolute;
  right: 0;
  top: 0;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;