CSS形状 - 三角形设计

Question

我们可以仅使用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*/
}

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

Answer 1

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

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>

Answer 2

引用实用主义： “变形不太受支持”

所以没有它我就找到了出路： HTML：

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

CSS：

#triangle1 {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    float:left;
    position:relative;
}
#triangle2

{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid blue;
    position:relative;
    margin-left:50px;
}
#triangle3
{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    float:left;
    position:relative;
    margin-top:-100px;

}
#triangle4
{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid blue;
    position:relative;
    margin-top:-100px;
    margin-left:50px;

}

这是小提琴：http://jsfiddle.net/9rgc728w/

我同意我的回答是长

Answer 3

CSS3 linear-gradient()可以绘制此背景：

<强> HTML：

<div></div>

必要的CSS：

div {
  background-image: linear-gradient(to top right, red 50%, blue 50%);
  background-size: 50% 100%;

  transform: skewX(-35deg);
  transform-origin: 0 100%;
}

输出图片：

body {
  background: linear-gradient(lightgreen, green);
  min-height: 100vh;
  margin: 0;
}
div {
  background-image: linear-gradient(to top right, red 50%, blue 50%);
  background-size: 50% 100%;

  transform: skewX(-35deg);
  transform-origin: 0 100%;
  width: 400px;
  height: 100px;
  margin: 20px;
}

<div>

</div>