边上的丝带/旗帜形状 CSS

Question

我一直在尝试在 CSS 中做一些带状旗帜样式，但我一直无法做到，我想知道是否有人可以指出我的正确观点，也不知道是否有好的教程如何使用这些类型的形状

这就是我想要实现的

Answer 1

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;
}

<div></div>

边上的丝带/旗帜形状 CSS

Ribbon / flag on sides shape with CSS

css

css-shapes