How to make a CSS triangle background on a div without using border and image? [duplicate]

Question

I know how to create triangles with CSS with borders and using images, but in my case, I'd like to use background color.

I want something like this image.

Can anyone help me?

Answer 1

An alternative is to use background linear gradient. The trick is to set the direction to bottom right, set the first range as white (or transparent) and the second range as the color you want to triangle to be.

In the following example the first half of background is white (from 0% to 50%) and the second half (from 50% to 100%) golden yellow.

.triangle {      width: 200px;      height: 200px;      background: linear-gradient(to bottom right, #fff 0%, #fff 50%, #a48d01 50%, #a48d01 100%);  }

<div class="triangle"></div>

Please note that this property is supported only by modern browsers (IE 11+, FF 49+)

Answer 2

The problem with creating triangles using CSS borders is their inflexibility when it comes to styling. As such, you can use a relatively fully pseudo fledged element instead, providing many more styling options:

Sure, you can do, e.g.:

Demo Fiddle

div{     height:50px;     width:50px;     position:relative;     overflow:hidden; } div:after{     height:100%;     width:100%;     position:relative;     -webkit-transform: rotate(45deg);     -moz-transform: rotate(45deg);     transform: rotate(45deg);     content:'';     display:block;     position:absolute;     left:-75%;     background-image:url(http://www.online-image-editor.com/styles/2013/images/example_image.png);     background-size:cover; }