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

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?

How would this 'triangle` look? Is it multiple triangles, a repeating background or what? — Paulie_D, Apr 29 '14 at 11:06
Basically you are after a triangle-shaped div (is that right). If so, that's not possible. Perhaps you have an image of what you are after. — Paulie_D, Apr 29 '14 at 12:28

score 55 · Answer 1 · edited Apr 03 '19 at 11:57

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+)

score 17 · Answer 2 · answered Apr 29 '14 at 10:42

17

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;
}

answered Apr 29 '14 at 10:42

SW4

69,876
20
132
137

I would like to background color not the background image. Have you any idea ? – user3584839 Apr 29 '14 at 11:05
3

...simply set the background color instead...?? – SW4 Apr 29 '14 at 11:10
i would like to triangular background color without using border and image. how can i do it? have you any other idea ? – user3584839 Apr 29 '14 at 11:22
1

The above works-have you tried changing it? Change background-image to background-color – SW4 Apr 29 '14 at 11:23
@SW4 Do you know how to change the angles to make the triangle smaller? like a 145º degree arrow? (not using borders as well). Thank you – another Jul 18 '16 at 23:19
@Roizpi - change the height/width of the pseudo or parent for size, rotation is set in the `transform` property – SW4 Jul 19 '16 at 13:31
If I enlarge height/width, the arrow will be longer, but the angle will remain on 45º if is a square/rectangle rotated, I was looking for `skew` property (transform). Thanks for your prompt answer. – another Jul 19 '16 at 16:53

score 8 · Answer 3 · edited Apr 03 '19 at 11:51

Try this tool to generate the shape you want: https://bennettfeely.com/clippy/. Then tweak the code according to your needs. For example, this is how you can get a triangle:

-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Support, however, is not the best as it's only fully supported in Firefox and non-existant in Edge/IE and therefore discouraged to use on production websites Clip path support

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

3 Answers3

Demo Fiddle

Linked