带有CSS的侧面形状的功能区/标志[重复]答案

【问题标题】：Ribbon / flag on sides shape with CSS [duplicate]带有CSS的侧面形状的功能区/标志[重复]
【发布时间】：2015-12-12 00:51:42
【问题描述】：

我一直在尝试在 CSS 中做某种丝带标志样式，但我一直没能做到，我想知道是否有人能指出我的正确之处，以及是否知道任何关于如何使用这些类型的好教程形状

这就是我想要实现的目标

【问题讨论】：

我已经把它当作一个骗子关闭了（即使链接的问题是关于边框形状的），因为这些方法仍然适用于这个方法，你只需要添加 background-color 或 fill 取决于关于选择 CSS 还是 SVG。
@Harry 有时你需要正确的关键字才能找到一些东西，
是的@DannyG，这就是为什么重复问题不是坏问题的原因。它们是很好的路标。
确实，这个问题有一个很好的答案。谢谢先生。

标签： css css-shapes

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：