CSS Forms - Triangle Design

Question

Is it possible to create only an image using CSS?

I can create a right triangle. But I cannot create this particular triangle. Any help would be greatly appreciated.

Code for the design of right triangles:

#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

Quote Pragmatist: "conversions are less supported"

So, I found a way out without it: 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; } 

Here is the fiddle: http://jsfiddle.net/9rgc728w/

I agree that my answer is long

Answer 2

This is possible using a single div element with a pseudo-element and 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 3

CSS3 linear-gradient() can draw this background:

HTML:

 <div></div> 

CSS required:

 div { background-image: linear-gradient(to top right, red 50%, blue 50%); background-size: 50% 100%; transform: skewX(-35deg); transform-origin: 0 100%; } 

Output Image:

 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>