Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use CSS to draw various shapes", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to draw various shapes with CSS" this article.

Adaptive ellipse

1. Adaptive ellipse

This is done through the border-radius property; border-radius, which can specify horizontal and vertical radii separately. Separate the two values with /. And the value of this property can accept not only the length value, but also the percentage value. The value of the percentage is resolved based on the size of the element, the width is the horizontal radius and the height is the vertical radius.

So you can set both radii to 50%.

Border-radius: 50% / 50%; / * 50% can be simplified to border-radius: 50%; * /

The final effect:

two。 Realization of semi-ellipse

The value of border-radius can be set separately, separated by spaces, and even provide completely different horizontal and vertical radii for the four corners.

The rendering order of the four values of border-radius starts from the upper left corner and renders clockwise.

When only three values are given, the fourth value is equal to the second

When two values are given, the third value is equal to the * value, and the fourth value is equal to the second value.

So the way to realize a semi-ellipse is:

Border-radius: 50% / 100% 100%; / * * will be resolved as follows: border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%; border-bottom-right-radius: 50% 0px; border-bottom-left-radius: 50% 0px; * /

Final result:

The same method for generating an ellipse of 1/4:

/ * if the fillet cannot be set, set it to 0 * / border-radius:

Final result:

Realization of parallelogram

When generating parallelograms, use transform: skew (- 45deg) directly on the current div; deformation will cause the contents of the div to be deformed as well, as follows:

The general solution is through the pseudo-element method, that is, all the styles are applied to the pseudo-element, and the pseudo-element is deformed. Because the content is not in the pseudo-element, the content will not be affected. The specific implementation is as follows:

Click.parallelogram {text-align: center;position: relative;}. Parallelogram::before {transform: skew (- 45deg); position: absolute;left: 0; absolute;left: 0: 0; top: 0: 0; bottom: 0: 0; absolute;left:-1; background: # fb3;}

The resulting effect is as follows:

This technique is useful not only for skew () morphing, but also for any other morph style, which can be used when you want to transform any element without changing its contents.

The generation of diamond picture

In css, some requirements are to cut the picture into a diamond. Using css can solve this problem very well, so that there is no need to cut the picture into a diamond in advance and affect the later maintenance.

Deformation-based scheme

Directly rotate in a way similar to parallelogram, and set max-width: 100% to img, which will cause the image to be cropped to octagon. Because 100% will be resolved to the side length of div. Therefore, the solution to this problem is to make the width of the image equal to the diagonal length of the div container. A better way is to enlarge the image by 2 times the root sign with scale (about 1.42x). The specific code is as follows:

Picture {width: 400pxx scale transform: rotate (45deg); overflow: hidden;}. Picture1 > img {max-width: 100% position height: 400px switch transform: rotate (- 45deg) scale (1.42);}

The effect is as follows:

The difference between scale and width magnification: scale zooms the picture by its center point (without specifying transform-origin). When you enlarge the picture through the width property, it will only zoom at the origin of its upper left corner, and then adjust the position of the picture with extra negative margins.

The method of trimming the path scheme also requires a layer of extra html tags in front, using the attribute clip-path, which was originally an attribute of svg, and using the function of polygon () this polygon, the value of the percentage used will be resolved to the size of the element itself.

Img {clip-path: polygon (50% 0, 100% 50%, 50% 100%, 0 50%);}

Clip-path can also participate in animation, as long as the animation is performed between the same shape function and the number of points is the same. For example, we want to smoothly expand the mouse hover to the completed area, as long as:

Picture {clip-path: polygon (50% 0, 100%, 50% 100%, 0 50%); transition: 1s clip-path;}. Picture:hover {clip-path: polygon (00,100,100%, 0100%);} realization of foot cutting effect

The way of radial gradient

To achieve the effect of a corner being cut off, you can use a gradient, which accepts an angle as the direction, and allows the text to overflow and exceed the chamfer area (because it is just a background pattern), as follows:

Div {background: # 58a; background: linear-gradient (- 45deg, transparent 15px, # 58a 0);}

The effect is as follows:

The way to achieve two chamfering:

Div {width: 200pxashing height: 100pxpolitical background: # 58a political background: linear-gradient (- 45deg, transparent 15px, # 58a 0) right, linear-gradient (45deg, transparent 15px, # 65a 0) left;background-size: 50% 100% left;background-size: no-repeat;}

The effect is as follows:

The realization of the same four chamfering angles:

Div {width: 200pxposition height: 100pxposition background: # 58a: background: linear-gradient (135deg, transparent 15px, # 58a 0) top left, linear-gradient (- 135deg, transparent 15px, # 58a 0) top right, linear-gradient (- 45deg, transparent 15px, # 58a 0) bottom right, linear-gradient (45deg, transparent 15px, # 58a 0) bottom left;background-size: 50% exchange backgroundground repeat: no-repeat;}

The effect is as follows:

The above code is poorly maintained and has to be modified in many ways when changing chamfer and color, so we can use scss's mixin to write:

@ mixin beveled-corners ($bg, $tl:0, $tr:$tl, $br:$tl, $bl:$tr) {background: $bg; background: linear-gradient (135deg, transparent $tl, $bg 0) top left, linear-gradient (225deg, transparent $tr, $bg 0) top right, linear-gradient (- 45deg, transparent $br, $bg 0) bottom right, linear-gradient (45deg, transparent $bl, $bg 0) bottom left; background-size: 50%; background-repeat: no-repeat;}

When called:

@ include beveled-corners (# 58a, 15px, 5px)

* the effect is that the upper left corner and lower right corner are the chamfer of 15px, and the upper right corner and lower left corner are the chamfer of 5px. The above minxin sets the initial value, which is the same as the border-radius assignment when the value passed in is less than four values.

By the same token, we can also create arc chamfer, or at least change it to a radial gradient.

Div {width: 200pxtransposition height: 100pxpolitical background: # 58a political background: radial-gradient (circle at top left, transparent 15px, # 58a 0) top left, radial-gradient (circle at top right, transparent 15px, # 58a 0) top right, radial-gradient (circle at bottom right, transparent 15px, # 58a 0) bottom right, radial-gradient (circle at bottom left, transparent 15px, # 58a 0) bottom left;background-size: 50% citrus repeat: no-repeat;}

The effect is as follows:

The way of inlining SVG and border-image

SVG can achieve size-independent zoom, and when the text overflows, it will act as a normal border, making the text fold. The specific implementation is as follows:

Div {width: 200px; height: 100px; border: 15px solid transparent; border-image: 1 url ('data:image/svg+xml,\\');}

The effect is as follows:

Solve the filling of the background color in the middle to add the same background color as border to the div block:

Div {width: 200pxashing height: 100pxashing border: 15px solid transparent;border-image: 1 url (data:image/svg+xml,\); background: # 58a borderland: padding-box;}

The most amazing thing about the CSS trimming path is that we can use both the percentage value (which converts to the width and height of the element itself as the cardinality) and the absolute length value, providing great flexibility.

If you use a trimming path to cut an element into an 20px-sized bevel chamfer, the specific code is as follows:

Background: # 58aX 20px path: polygon (20px 0, calc (100%-20px) 0,100% 20px, 100% calc (100%-20px), calc (100%-20px) 100%, 20px 100%, 0 calc (100-20px), 0 20px)

The advantage of this method is that you can use any type of background and even trim replacement elements (such as pictures)

And supports animation effects

Cons: when the inner margin is not wide enough, it will cut out the text.

Implementation of trapezoidal tab

The trapezoid can be realized through

Div {position: relative;display: inline-block;padding: .5em 1em .35em; color: white;} div::before {content:''; position: absolute;top: 0 position right: 0 position bottom: 0 position left: 0 position Z position:-1 position background: # 58a position transform: scaleY (1.3em) perspective (.5em) rotateX (5deg); transform-origin: bottom;}

The effect is as follows:

The deformation effect causes the element to rotate spatially on its own centerline, which makes it difficult to control its size. The solution is to set transform-origin:bottom;, to fix its bottom edge when it rotates in 3D space. While fixing the bottom edge, the height shrinkage becomes more conspicuous. To solve this problem, you can change its size by transforming the attribute (scaleY ()).

In the same way, you can implement the following tab layout:

The specific code is as follows:

Nav > a {position: relative;display: inline-block;padding: .3em 1em 0;} nav > a::before {content:'; position: absolute;top: 0; right: 0; bottom: 0; left: 0 absolute;top index:-1 absolute;top background: # ccc;background-image: # ccc;background-image: linear-gradient (hsla (0meme 0% 100% 1em. 6), hsla (0meme 0% 100%); border: 1px solid rgba (0meme 0mine0pence0.4); border-bottom none: Border-radius: .5em .5em 00 Boxplay shadow: 0.15em white inset;transform: perspective (.5em) rotateX (5deg); transform-origin: bottom;}

By changing transform-origin to bottom left or bottom right, you can immediately get a left-slanted or right-slanted tab.

The disadvantage of this method is that the angle of the bevel depends on the width of the element. However, this method is very useful for multiple elements with little change in width, such as navigation menus.

Simple drawing of pie chart

The idea is to specify the left and right parts of the circle as the above two colors, then cover them with pseudo elements, and rotate to determine how big the sector is exposed. The specific code is as follows:

.pie {width: 100pxposition height: 100pxbordermuri radius: 50% inherit;transform-origin background: yellowgreen;background-image: linear-gradient (to right, transparent 50%, # 655 0); .pie {content:'; display: block;margin-left: 50% inherit;transform-origin height: 100% bordercolor radius: 0100% 0 / 50% inherit;transform-origin: left;}

The results are as follows:

This method also supports animation, and you can use CSS animation to animate a pie chart from 0 to 100%, resulting in a cool progress indicator:

@ keyframes spin {to {transform: rotate (.5turn);}} @ keyframes bg {50% {background: # 655;}}. Pie::before {content:'; display: block;margin-left: 50% block;margin-left height: 100% bordermuri radius: 0% 100% 0 / 50% spin backgroundcolor: left;animation: spin 3s linear infinite, bg 6s step-end infinite;}

The method of generating multiple static pie charts with different ratios can be realized through the above animation. You need to set the animation to be paused, and then set a negative animation delay to jump directly to any point in time in the animation. The final code is as follows:

2060.pie {position: relative;width: 100pxcross height: 100pxborderradius: 50% background: yellowgreen;background-image: linear-gradient (to right, transparent 50%, # 655 0); color: # 000th transform: center; @ keyframes spin {to {transform: rotate (.5turn);}} @ keyframes bg {50% {background: # 655;}}. Pie::before {content:'; position: absolute;top: 0; left: 50% Width: 50%; height: 100% bordermuri radius: 0% 100% 0 / 50% step-end infinite;animation-play-state: inherit;transform-origin: left;animation: spin 50s linear infinite, bg 100s step-end infinite;animation-play-state: paused;animation-delay: inherit;}. Pie span {position: relative;z-index: 10;}

The effect is as follows:

Use the SVG solution svg {width: 100px; height: 100pxtransform: rotate (- 90deg); background: yellowgreen;border-radius: 50%;} circle {fill: yellowgreen;stroke: # 655 fill: 32 X fill: 38 100; / * sectors with a ratio of 38% * /}

If the perimeter of the pie chart is close to 100, the percentage value of the ratio can be directly specified as the length of the strokedasharray without any calculation. Because the perimeter is 2 π r, the radius is 100 pi 22 π ≈ 15.915, and finally round this value to 16. Specify its size in the viewBox property of SVG instead of using the width and height properties, so that it automatically adapts to the size of the container.

The advantage of SVG is that "it is very easy to add a third color, and you can use inline styles to specify colors."

The above is all the contents of the article "how to draw various shapes with CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.