CSS形状 – 三角形设计

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

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

直角三角形设计代码：

#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*/
}

最佳答案

这可以使用带有：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;
}

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。