html - CSS 形状 - 三 Angular 形设计

Question

我们可以仅使用 CSS 创建以下图像吗？

我能够创建一个直 Angular 三 Angular 形。但是我无法创建这个特定形状的三 Angular 形。任何帮助将不胜感激。

直 Angular 三 Angular 形设计代码:

#triangle,
#triangle3 {
  width: 0;
  height: 0;
  border-width: 100px 0 0 100px;
  border-style: solid;
  border-color: transparent transparent transparent #ff0033;
  float: left;
}
#triangle2,
#triangle4 {
  width: 0;
  height: 0;
  border-width: 0 100px 100px 0;
  border-color: transparent #294fa3 transparent transparent;
  border-style: solid;
  float: left;
  position: relative;
  left: -100px;
}
#triangle3 {
  position: relative;
  left: -100px;
}
#triangle4 {
  position: relative;
  left: -200px;
  /*specifically for 4*/
}

<div id="triangle"></div>
<div id="triangle2"></div>
<div id="triangle3"></div>
<div id="triangle4"></div>

Answer 1

这可以使用带有 :pseudo-element 和 transform: skew() 的单个 div 元素。

div, div:after {
  position: relative;
  width: 0;
  height: 0;
  border-right: 200px solid #2B3FA5;
  border-bottom: 75px solid #FF0000;
  transform: skew(-35deg);
  margin-left: 30px;
}
div:after {
  position: absolute;
  content: '';
  left: 200px;
  transform: skew(0deg);
  margin-left: 0px;
}

<div></div>