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?
-
1css-tricks.com/snippets/css/css-triangletechfoobar– techfoobar2014-04-29 10:35:18 +00:00Commented Apr 29, 2014 at 10:35
-
How would this 'triangle` look? Is it multiple triangles, a repeating background or what?Paulie_D– Paulie_D2014-04-29 11:06:52 +00:00Commented Apr 29, 2014 at 11:06
-
lea.verou.me/css3patterns/#half-rombesPaulie_D– Paulie_D2014-04-29 11:17:13 +00:00Commented Apr 29, 2014 at 11:17
-
No there is one triangle and some text with the same div.user3584839– user35848392014-04-29 11:42:01 +00:00Commented Apr 29, 2014 at 11:42
-
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– Paulie_D2014-04-29 12:28:41 +00:00Commented Apr 29, 2014 at 12:28
Add a comment
|
3 Answers
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+)
Comments
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;
}
7 Comments
user3584839
I would like to background color not the background image. Have you any idea ?
SW4
...simply set the background color instead...??
user3584839
i would like to triangular background color without using border and image. how can i do it? have you any other idea ?
SW4
The above works-have you tried changing it? Change background-image to background-color
roizpi
@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
|
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
