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 和 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>

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;

}

这里是 fiddle: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>

CSS 形状 - 三角形设计

CSS shapes - Triangle design

html

css

css-shapes