Create a triangle with CSS
The squares that present the color of an item can have up to two colors that in the latter case should be presented as shown below:
Both colors are applied in the CSS property background.
What is being done is to have a square to present the color and in cases where there is a second color a new element is applied within the square of the main color.
Problem
The inner element, has of course a square shape, but to get to the desired layout, it should be in a triangular shape.
Example in JSFiddle
HTML
<div class="color">
<div></div>
</div>
CSS
.color{
width:40px;
height:40px;
background:white;
}
.color > div{
background:black;
width:20px;
height:20px;
}
Question
How to pass a block element to a triangular shape via CSS ?
4 answers
The trick to solving this is quite interesting. It is based on the fact that when two edges of an element meet, they form an angle of 45 degrees to each other.
Imagine your dimensionless 40px square (width and height), and with the 4 edges set, all 20px thick and each edge with a different color. The result looks like this:
The above example was generated with the following CSS:
.color > div{
border-top: 20px solid black;
border-right: 20px solid blue;
border-bottom: 20px solid green;
border-left: 20px solid red;
}
In the example above, we use the 4 edges, each 20px thick. To achieve the effect you want, all you need is two edges, both the thickness equivalent to the size of the side of your square (i.e. 40px):
.color > div{
border-left: 40px solid transparent;
border-bottom: 40px solid black;
}
Above we use the left (transparent) and bottom (black) edges. But it is possible to achieve the same effect using the right (black) border and the upper one (transparent):
.color > div{
border-right: 40px solid black;
border-top: 40px solid transparent;
}
Understanding this mechanism, it is possible to generate several types of Triangle, including those that you ask in the question. To generate a square with diagonal division and two colors, you can both use the external div to define one of the colors, as well as color the edges that I set as transparent in the examples.
One more example, its black and Red Square:
.color > div{
border-right: 40px solid red;
border-top: 40px solid black;
}
It is possible to do this for example through transparent borders (I do not know for sure if pre-CSS3 are available):
border-left: 40px solid transparent;
border-right: 0px solid transparent;
border-bottom: 40px solid black;
Example in jsFiddle . Source: css-tricks.com
That is, instead of you assign width, height and background, you use border-left and border-right - transparent, one with zero and the other with the desired width - and border-bottom - with the desired height and background color.
I use this method a lot of creating a triangle with edges, but if I understood your question well, and looking at the images you gave as an example, you want a triangle that can not be done with edges, since it is an effect that comes diagonally, starting with "top left", right?
For this case, do the following:
background: #000; /* para navegadores sem suporte a gradient */
/* IE9 SVG, precisamos declarar uma class para o elemento e no CSS um "filter: none" */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmYwMDA0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(-45deg, #000 0%, #000 50%, #ff0004 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#000), color-stop(50%,#000), color-stop(50%,#ff0004)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #000 0%,#000 50%,#ff0004 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #000 0%,#000 50%,#ff0004 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #000 0%,#000 50%,#ff0004 50%); /* IE10+ */
background: linear-gradient(135deg, #000 0%,#000 50%,#ff0004 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#ff0004',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
With this you will achieve an effect equal to what you requested.
Since it was not quoted I will give a solution using the pseudo-element ::after
With it vc creates an element inside div from CSS, uses transform to rotate 45 graus and positions with transform-origin
See the result in example
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
background-color: black;
}
.wrapper::after {
content: "";
position: absolute;
width: 200%;
height: 200%;
background-color: red;
transform: rotate(45deg);
transform-origin: left top;
}<div class="wrapper"></div>Second option using clip-path See browser support https://caniuse.com/#feat=css-clip-path (apparently does not work on IE)
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
background-color: red;
}
.tri {
height: 100%;
width: 100%;
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
clip-path: polygon(0 0, 0% 100%, 100% 100%);
background-color: black;
}<div class="wrapper">
<div class="tri"></div>
</div>Official W3C documentation of clip-phat https://www.w3.org/TR/css-masking-1/#the-clip-path
Note: another solution would still be using SVG: https://www.w3.org/TR/SVG11 /