css--Draw a triangle together (rookie takeoff series)

1. Using border features

First look at an example, the example of border four sides of different colors, width is 50px

The code is as follows:

width:0;height:0;border-top:50px solid #FFF0C4, border-left:50px solid #C7F5BC, border-right:50px solid #D9BBF3; border-bottom:50px solid #FCC2C7;            

　　

Based on this feature of border, adjusting the border width and color combinations, we can draw a variety of triangles, such as:

 .border1  { height :  0 ; :  0 ;  Border-top : 50px solid #58a ;  Border-left : 50px solid white ;  Border-right : 50px solid white ;  Border-bottom : 50px solid white ;} 

 .border2  { height :  0 ; :  0 ;  Border-top : 25px solid white ;  Border-left : 25px solid #58a ;  Border-right : 25px solid white ;  Border-bottom : 25px solid #58a ;} 

. Border3 {    height: 0;     width: 0;     border-top:50px solid #58a;     border-left:20px solidwhite;     border-right:50px solidwhite;     border-bottom:50px solidWhite;}

Using rounded corners and pseudo elements (:: After,::before), you can create a simple dialogue bubble effect.

. Talk3{float: Left;Margin-left:70px;Height:50px;width:100px;Background-color:#58a;Border-radius:60px;position:relative;}. Talk3::after{content: "";position:Absolute;Bottom:-5px;Border-top:10px solid Rgba (0,0,0,0);Border-left:40px Solid Rgba (0,0,0,0);Border-right:40px Solid #58a;Border-bottom:10px Solid #58a; Left:-50px;Transform:Rotate ( -10deg);}

2. Using background gradients

This method uses the background gradient linear-gradient method. Usually this method can be used to make linear gradients

Background:linear-gradient (to top right, black 10px, #58a);

Setting the gradient start position of a different color to the same point, or including the starting position of the gradient point two before the gradient point, causes the gradient part of the gradient to be overwritten by the non-gradient portion of the gradient, forming the effect of the cut background. This passage is a bit of a detour, and the code explanation is actually
background: linear-gradient(to top right, transparent 渐变1, #58a 渐变2);(Gradient 2< gradient 1)

With this principle, we can create a richer border style.

Background: #58a; background:linear-gradient (45deg, Transparent 20px, #58a 0%);

If you need to slice multiple corners, you can work with the background cutting technique to split the background into multiple parts, slicing on each section

Background: #58a; background:linear-gradient (135deg, Transparent 15px, #58a 0) Top left,linear-gradient ( -135deg,  Transparent 15px, #655 0) Top right,linear-gradient ( -45deg, Transparent 15px, #58a 0) Bottom right,linear-gradient (45deg, Transparent 15px, #655 0) bottom left;background-size:50% 50%;background-repeat:no-repeat;

Extension

With a linear gradient on the background, we can also create a rounded cut with a radial gradient, modifying the code as follows:

Background: #58a; Background:radial-gradient (circle at top left,transparent 15px, #58a 0) top left,            radial-gradient (  Circle at top right,transparent 15px, #655 0) Top right,            radial-gradient (circle at bottom right,transparent 15px, #58a 0) Bottom right,            radial-gradient (circle at bottom left,transparent 15px, #655 0) Bottom left;background-size:50% 50% ; background-repeat:no-repeat;    

Get results:

PS: This is best used in the case of oblique cut, which is the angle of 45,-45,135,-135. Other angle (or radial) pages are rendered with visible jagged edges and are not aesthetically pleasing

3. Using the background map

This method is the most provincial, cut out the picture is set to the background of the Div, but too many pictures of the reference will greatly increase the number of HTTP requests, reduce the performance of the page. or only when the border involves very complex shapes or shadows, it is difficult to use CSS to solve the time to use it ~

4. Using Canvas and SVG

As long as it is a painting thing, there is no solution to these two, but since it is a CSS implementation, for the moment will not mention them

css--Draw a triangle together (rookie takeoff series)