How do CSS triangles work? How to make geometric shapes for kss
The project intercompanied in one interested me stumbled upon an interesting example of how to create a CSS triangle. And since the triangles have become constantly used by the elements of the web page, then we must be able to create it. This method will be this note.
Googling the question How to make a CSS triangle found some more interesting methods, but I liked an example from the project anymore. This is the method of the old and long known. It is based on the use of such CSS properties as Border-Color and Border-Width. The essence of the method is simple. Create any block (DIV), and and ask him the CSS properties of Border-Color and Border Width. The Border-Width property sets the thickness of the border, and receives four values. The thick border on top, right, below, on the left. I remind that when recording this CSS, the counting properties starts from the upper boundary and go clockwise. Thus, to create a triangle from our block, the triangle is top in the Border-Width property we will install the upper boundary of the thickness of 0, the left and right thick of the block, and the lower in the block of the block. With the Border-Color property, I think it has already become clear. It also takes four values \u200b\u200bon the sides of the block. If we have a triangle on a white background, all boundaries set white, except the bottom. Well, now as usual. Since the note turned out not very big decided to add an animation to CSS to the triangle.
Example: For animation, Mouse over the triangle
As you can see everything is simple enough. The lack of such a method can be attributed that the triangle will not be able to set the shadows and the rest of the beautifulness. But the method is simple and crossbrawser. Use it in projects to solve you.
One of the very frequent tasks that gets up before the vestist drawing triangles on CSS. For example, they can be on reassigning and unfolding blocks, on the drop-down menu, on some other interface elements. And in this article I will show self optimal options Triangle drawing on CSS.
1st way
Creating a simple arrow image (for example, clipping from design). This method I myself constantly use, and I know that it is the most popular, and in some cases the only one. But there is a big minus, if you do transparent places in a triangle, then you need to use PNG., which the IE6 do not support. And if you take Jpg., depending on the background you need to take something or another image. As a result, maybe 100 the same arrows who have a different background, in the end, will 100 Images.
2nd way
This method already uses clean CSS.It is very simple, but beautiful corners (for example, with shadows, gradients, with some sophisticated drawings) you will not do it:
Triangle (
Border Color: # 000 #fff #FFFFFFF;
Border-Style: Solid;
Border-width: 10px 5px 0 5px;
Height: 0;
width: 0;
}
Next to the usual block div You can apply the class triangleAs a result, this block will become an arrow of black ( #000 ). Dimensions can be adjusted through property border Width.. Here about this method, many of you did not even hear, so if the arrow is simple, then this is the best way.
other methods
From time to time I come across with them, but I myself do not use them, because none of them is crossbaiser. All of them are used CSS3 and / or HTML5who, alas, are still very poorly supported by even modern browsers, but do not have to talk about old and talk. Therefore, I recommend you to use on this moment So far only first 2 Fashion.
triangle with CSS stroke (14)
transforms \u003d [("Border-Left-Width": "30", "margin-left": "70"), ("Border-Bottom-Width": "80"), ("Border-Right-Width": "30"), ("Border-Top-Width": "0", "margin-top": "70"), ("width": "0"), ("Height": "0", "margin -top ":" 120 "), (" borderleftcolor ":" transparent "), (" borderrightcolor ":" transparent ")]; $ ("# A"). Click (Function () ($ ("Border"). Trigger ("Click");)); (FUNCTION ($) (VAR Duration \u003d $ 1000 (". Border"). Click (Function () (for (var i \u003d 0; I< transforms.length; i++) {
$(this)
.animate(transforms[i], duration)
}
}).end()
}(jQuery))
.border {
margin: 20px 50px;
width: 50px;
height: 50px;
border-width: 50px;
border-style: solid;
border-top-color: green;
border-right-color: yellow;
border-bottom-color: red;
border-left-color: blue;
cursor: pointer
}
CLICK IT!
Random article
/ ** * Randomize Array Element Order In-Place. * USING DURSTENFELD SHUFFLE ALGORITHM. * / FUNCTION SHUFFLEARRAY (Array) (for (var i \u003d array.length - 1; i\u003e 0; i--) (var j \u003d math.floor (math.random () * (i + 1)); VAR TEMP \u003d Array [i]; array [i] \u003d array [j]; array [j] \u003d temp;) Return Array;) transforms \u003d [("border-left-width": "30", "margin-left": "70"), ("Border-Bottom-Width": "80"), ("Border-Right-Width": "30"), ("Border-Top-Width": "0", "margin-top ":" 70 "), (" width ":" 0 "), (" Height ":" 0 "), (" borderleftcolor ":" transparent "), (" borderrightcolor ":" transparent ")]; transforms \u003d shufflearray (Transforms) $ ("# A"). Click (Function () ($ (". Border"). Trigger ("Click");)); (FUNCTION ($) (VAR Duration \u003d $ 1000 (". Border"). Click (Function () (for (var i \u003d 0; i< transforms.length; i++) {
$(this)
.animate(transforms[i], duration)
}
}).end()
}(jQuery))
.border {
margin: 50px;
width: 50px;
height: 50px;
border-width: 50px;
border-style: solid;
border-top-color: green;
border-right-color: yellow;
border-bottom-color: red;
border-left-color: blue;
cursor: pointer
}
CLICK IT!
All immediately version
$ ("# A"). Click (Function () ($ ("Border"). Trigger ("Click");)); (Function ($) (VAR Duration \u003d $ 1000 (". Border"). Click (Function () ($ (this) .Nimate (("Border-Top-Width": 0, Border-Left-Width: 30, Border-Right-Width: 30, "Border-Bottom-Width": 80, "Width": 0, "Height": 0, "margin-left": 100, "margin-top": 150, "BordertopColor": "Transparent", "borderrightcolor": "transparent", "borderleftcolor": "transparent"), duration))). end ()) (jQuery). Border (Margin: 50px; width: 50px; Height : 50px; Border-Width: 50px; Border-Style: Solid; Border-Top-Color: Green; Border-Right-Color: Yellow; Border-Bottom-Color: Red; Border-Left-Color: Blue; Cursor: Pointer )
CLICK IT!
CSS Triangles: Tragedy in five actions
We have two gradients G1 and G2, the blue line is the width of the DIV W and each gradient will have 50% (W / 2), and each side of the triangle can be equal to w. Green line is the height of the HG gradient and we can easily get the formula below:
(W / 2) ² + HG² \u003d W² ---\u003e Hg \u003d (SQRT (3) / 2) * W ---\u003e Hg \u003d 0.866 * W
We can rely on Calc () to fulfill our calculation and get the necessary result:
TRI (--w: 100px; width: var (- w); Height: 100px; Display: inline-block; Background-image: linear-gradient (to bottom right, Transparent 49.8%, Red 50%), Linear- Gradient (to Bottom Left, Transparent 49.8%, Red 50%); Background-Size: Calc (var (- w) / 2 + 0.5%) CALC (0.866 * VAR (- W)); Background-position: left Bottom, Right Bottom; Background-Repeat: No-Repeat;)
Another way is to control the height of DIV and it is easy to save the syntax of the gradient:
TRI (--W: 100px; width: var (- w); Height: Calc (0.866 * var (- w)); Display: inline-block; Background: linear-gradient (to botto right, transparent 49.8% , Red 50%) Left, Linear-Gradient (to Bottom Left, Transparent 49.8%, Red 50%) Right; Background-Size: 50.2% 100%; Background-Repeat: no-repeat;)
4) random triangle
To get a random triangle, it is easy, since we just need to remove the condition of 50% of each of them, but we must maintain two conditions (both must have the same height, and the sum of both widths must be 100%).
Tri-1 (Width: 100px; Height: 100px; Display: inline-block; Background-image: linear-gradient (to bottom right, Transparent 50%, Red 0), Linear-gradient (To Bottom Left, Transparent 50%, Red 0); Background-size: 20% 60%, 80% 60%; Background-position: Left Bottom, Right Bottom; Background-Repeat: no-repeat;)
But what if we want to determine the value for each side? We just need to make the calculation again!
We define Hg1 and Hg2 as the height of our gradient (both of them are equal to the red line), and then WG1 and WG2 as the width of our gradient (WG1 + WG2 \u003d A). I will not detail the calculation, but at the end we will have:
WG2 \u003d (A² + C²-B²) / (2a) WG1 \u003d A - WG2 HG1 \u003d HG2 \u003d SQRT (B² - WG1²) \u003d SQRT (C² - WG2²)
Now we have reached the CSS limit, because even with Calc () we will not be able to implement this, so we just need to collect the final result manually and use them as a fixed size:
bonus
We should not forget that we can also apply turn and / or distortion, and we have more opportunities to get a larger triangle:
TRI (--WG1: 20PX; --WG2: 60px; --HG: 30px; Width: Calc (VAR (- WG1) + var (- WG2)); Height: 100px; Display: inline-block; Background -Image: linear-gradient (to bottom right, Transparent 50%, Red 0), Linear-gradient (to bottom left, transparent 50%, Red 0); Background-Size: var (- WG1) Var (- HG ), Var (- WG2) var (- HG); Background-position: Left Bottom, Right Bottom; Background-Repeat: No-repeat;)
And, of course, we must keep in mind the SVG solution, which may be more suitable in some situation:
sVG (Width: 100px; Height: 100px;) Polygon (Fill: Red;)
Others have already explained it well. Let me give you animation, which will explain it quickly: http://codepen.io/chriscoyier/Pen/Lotjh
Here is some kind of code for the game and study concepts.
/ * Border Width Is Border Thickness * / # Border-Demo (Background: Gray; Border-Color: Yellow Blue Red Green; / * Top Right Bottom Left * / Border-Style: Solid; Border-Width: 25px 25px 25px 25px ; / * Top Right Bottom Left * / Height: 50px; width: 50px;)
Play with this and see what happens. Install the height and width in zero. Then remove the top border and make the left and right transparent or just look at the code below to create a CSS triangle:
# Border-Demo (Border Left: 50px Solid Transparent; Border-Right: 50px Solid Transparent; Border-Bottom: 100px Solid Blue;)
Miscellaneous approach. With a linear gradient (for IE, only IE 10+). You can use any angle:
Triangle (Margin: 50px auto; width: 100px; height: 100px; / * linear gradient * / background: -moz-linear-gradient (-45deg, RGBA (255,0,0,0) 0%, RGBA (255, 0,0,0) 50%, RGBA (255,0,0,1) 50%, RGBA (255,0,0,1,1,0) 100%); / * ff3.6 + * / background: -Webkit-gradient (Linear, Left Top, Right Bottom, Color-Stop (0%, RGBA (255,0,0,0,0)), Color-Stop (50%, RGBA (255,0,0,0,0)), Color-Stop (50%, RGBA (255,0,0,1)), Color-Stop (100%, RGBA (255,0,0,1))); / * Chrome, Safari4 + * / background: -Webkit-linear- Gradient (-45deg, RGBA (255,0,0,0,0) 0%, RGBA (255,0,0,0,0) 50%, RGBA (255,0,0,1) 50%, RGBA (255.0, 0,1) 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (-45deg, RGBA (255,0,0,0,0) 0%, RGBA (255,0,0 0) 50%, RGBA (255,0,0,9) 50%, RGBA (255,0,0,1) 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (- 45deg, RGBA (255,0,0,0,0) 0%, RGBA (255.0.0.0.0) 50%, RGBA (255,0,0,1) 50%, RGBA (255,0,0,0,1 ) 100%); / * IE10 + * / background: linear-gradient (135deg, RGBA (255,0,0,0,0) 0%, RGBA (255,0,0,0) 50%, RGBA (255.0, 0.1) 50%, RGBA (255,0,0,1) 100%); / * W 3C * /; )
Start from the main square and borders. Each border will have another color, so we can tell them separately:
Triangle (Border Color: Yellow Blue Red Green; Border-Style: Solid; Border Width: 200px 200px 200px 200px; Height: 0px; width: 0px;)
But there is no upper border, so install its 0px width. Now our 200px will make our 200px triangle high.
Triangle (Border Color: Yellow Blue Red Green; Border-Style: Solid; Border-Width: 0PX 200px 200px 200px; Height: 0px; width: 0px;)
Then, to hide two side triangles, set the transparency of the frame. Since the upper border is effectively removed, we can also establish the transparency of the border with the top color.
TRIANGLE (Border Color: Transparent Transparent Red Transparent; Border-Style: Solid; Border-Width: 0PX 200px 200px 200px; Height: 0px; width: 0px;)
Consider below the triangle
Triangle (Border Bottom: 15px Solid # 000; Border-Left: 10px Solid Transparent; Border-Right: 10px Solid Transparent; width: 0; Height: 0;)
This is what we are given:
Why did it work out in this form? The diagram below explains the size, please note that 15px was used for the lower border, and 10px was used for the left and right.
It is very easy to make a rectangular triangle, also removing the right border.
And now something completely different ...
Instead of using CSS tricks, do not forget about solutions as easy as HTML objects:
▲The boundaries use the corner edge, where they intersect (an angle of 45 ° with equal widths, but the change in the border width can distort the angle).
Hiding certain borders, you can get the effect of a triangle (as you can see above, making different portions of different colors). Transparent is often used as edible color to achieve a triangle shape.
here is another violin:
Container: After (Position: Absolute; Right: 0; Content: ""; margin-right: -50px; margin-bottom: -8px; border-width: 25px; Border-Style: Solid; Border-Color: Transparent Transparent TRANSPARENT # 000; width: 0; Height: 0; z-index: 10; -Webkit-transition: Visibility 50ms Ease-In-Out, Opacity 50ms Ease-in-Out; Transition: Visibility 50ms Ease-In-Out, Opacity 50ms EASE-IN-OUT; botTom: 21px;) .container (float: left; margin-top: 100px; position: relative; width: 150px; Height: 80px; background-color: # 000;) .containerred (Float: Left: Left ; margin-top: 100px; position: relative; width: 100px; Height: 80px; background-color: red;)
Miscellaneous approach:
CSS3 triangles With rotation of rotation
The triangular form is quite easy to do with this technique. For people who prefer to see an animation explaining how this technique works here, she:
- Link to Animation: How to create a triangle CSS3 .
- AND Demo: Triangles CSS3, Made with the transformation rotate.
Otherwise, there is a detailed explanation in 4 acts (this is not a tragedy) on how to make an equally chaired rectangular triangle with one element.
- Note 1: For non-equal triangles and bizarre things you can see step 4 .
- Note 2: In the following fragments, supplier prefixes are not included. they are included in the CodePen demons .
- Note 3: HTML for the next explanation is always:
STEP 1: Div
Easy, just make sure that width \u003d 1.41 x Height. You can use any technician (), including the use of interest values \u200b\u200band Padding-Bottom to maintain the parties and creation flexible triangle . On the next image Div has a golden yellow border.
In this Div insert pseudo-element And give it 100% width and height of the parent element. Pseudo-element has a blue background in the following image.
CSS. :
TR (width: 30%; padding-bottom: 21.27%; / * \u003d width / 1.41 * / position: relative;) .tr: Before (Content: ""; Position: absolute; top: 0; left: 0; width : 100%; Height: 100%; Background: # 0079C6;)
Step 2: Let's turn
First, the most important thing: determine the origin of the transformation . By default, the origin is in the center of the pseudo-element, and we need it in the lower left corner. By adding this CSS. In a pseudo-element:
transform-Origin: 0 100%; or Transform-Origin: Left Bottom;
Now we can rotate TRANSform: rotate (45deg); 45 degrees clockwise with Transform: Rotate (45deg);
At the moment we have this CSS. :
TR (width: 30%; padding-bottom: 21.27%; / * \u003d width / 1.41 * / position: relative;) .tr: Before (Content: ""; Position: absolute; top: 0; left: 0; width : 100%; Height: 100%; Background: # 0079C6; Transform-Origin: 0 100%; transform: rotate (45deg);)
Step 3: Hide it
To hide the unwanted pieces of the pseudo-element (everything that overwhelms DIV with a yellow frame), you just need to install Overflow: Hidden; on the container. After removing the yellow border, you will get ... TRIANGLE ! :
TR (width: 30%; padding-bottom: 21.27%; / * \u003d width / 1.41 * / position: relative; overflow: hidden;) .tr: Before (Content: "; Position: absolute; top: 0; left : 0; width: 100%; Height: 100%; background-color: # 0079c6; transform-origin: 0 100%; transform: rotate (45deg);)
Step 4: Go further ...
Having done another step using CSS based on this, I added arrows to my back and the following buttons (yes, I know that this is not a 100% cross browser, but, nevertheless, the spot).
TRIANGLE (WIDTH: 0; Height: 0; Border-Left: 50px Solid Transparent; Border-Right: 50px Solid Transparent; Border-Bottom: 100px Solid Red; Margin: 20px auto;) .triangle-down (Border-Bottom: None ; border-top: 100px solid red;) .triangle-left (Border-Left: none; Border-Right: 100px Solid Red; Border-Bottom: 50px Solid Transparent; Border-Top: 50px Solid Transparent;) .triangle-right (Border-Right: None; Border-Left: 100px Solid Red; Border-Bottom: 50px Solid Transparent; Border-Top: 50px Solid Transparent;) .triangle-after: After (Width: 0; Height: 0; border-left : 5PX Solid Transparent; Border-Right: 5px Solid Transparent; Border-Bottom: 5px Solid Red; Margin: 0 5px; Content: ""; display: inline-block;) .triangle-after-right: after (Border Right : none; border-left: 5px solid blue; border-bottom: 5px solid transparent; border-top: 5px solid transparent;) .triangle-before: Before (Width: 0; Height: 0; Border-Left: 5px Solid Transparent ; Border Right: 5px SO Lid Transparent; Border Bottom: 5px Solid Blue; Margin: 0 5px; Content: ""; Display: inline-block; )Triangle-before-left: Before; Border-Right: 5px Solid Blue; Border-Bottom: 5PX Solid Transparent; Border Top: 5px Solid Transparent;)
BACK NEXT.Many have heard that you can make triangles on CSS. For this, there is a wonderful hack with a Border property that can be used to make triangles on CSS without a single picture.
How to make triangles on css
How do you need to display the browser boundaries if all boundaries have a transparent color (that is, there are no them), and one (for example, the bottom) border \u003d 10px and is there color? Something flashed? Right! It will escap the rest of the borders gradually at one point. Not logical, but it is :)
That is, if you specify one border \u003d the desired height of the triangle, and the remaining boundaries are set with transparent color, then we obtain a triangle, with this can be obtained both equilateral and an isoscele-free triangle. The triangle will be directed towards the opposite of the one that the boundary is indicated. If you specify the right border, then get the "arrow" to the left, the upper border is down. Etc.
Consider triangles on CSS on code example
Border: 30px Solid Transparent; / * Transparent borders * / Border-Top: 30px Solid Green; / * Add triangle * / width: 60px; Height: 60px;It will look like this.