03 -- css shape -- css secrets, 03 -- css secrets

03 -- css shape -- css secrets, 03 -- css secrets

Shape

An adaptive elliptic

1. Difficulties
1> circle
You may have noticed that setting a border-radius sufficiently large for any square Element,
You can turn it into a circle. The CSS code used is as follows:

1 # bd {2 width: 200px; 3 height: 200px; 4 background: # fb3; 5 border-radius: 100px;/*> = half of the square side length */6}

 

* When the sum of the radius of any two adjacent rounded corners exceeds the border box size
The proxy must proportionally reduce the value used by the border radius until they do not overlap.
So far

2> elliptic
If its width and height are equal, it is displayed as a circle; if its width and height are equal
It is displayed as an elliptic.

2. Solution
Speaking of border-radius, there is a little-known truth: It can specify the level separately.
And vertical radius. You only need to use a slash (/) to separate the two values. This feature allows me
Create an elliptical rounded corner at the corner.

Therefore, if we have a dimension
200px × 150px, you can specify the two RADIUS values of the rounded corner as the element width and height respectively.
To obtain an exact elliptic:

#bd {    width:200px;    height:100px;    border-radius:100px/50px;}

However, this code has a major defect: as long as the element size changes,
The border-radius value must be changed. We can see in Figure 3-5 that when the element size
When it is changed to 200px × 300px, what will happen after border-radius does not change?
Result. Therefore, if our element size changes with its content, this is a question.
Question.

It not only accepts the length value, but also accepts the percentage value.
This percentage value is parsed Based on the element size, that is, the width is used for horizontal radius resolution, while the height
Used to parse the vertical radius. This means that the same percentage may be calculated for different levels and troughs.
Straight radius.

#bd {    border-radius:50%;}

 

3. Semi-elliptic
We can even provide completely different levels and troughs for all four corners.
Straight radius by specifying 1 ~ before the slash ~ 4 values. Specify another 1 ~ after the slash ~ Four values. Please note
The two groups of values are separately expanded into four values. For example, when the border-radius value is
10px/5px 20px, the effect is equivalent to 10px 10px 10px/5px 20px
5px 20px.

#bd {    border-radius:50%/100% 100% 0 0;}

 

A semi-elliptic can be semi-circular, as long as its width is just twice the height (or split along the vertical axis)
In the case of an ellipse, it is twice the width of the height extension.

4. 1/4 elliptic
To create a 1/4 elliptic, the horizontal and vertical radius values of an angle must be
100%, and the other three corners cannot be set as rounded corners.

#bd {    border-radius:100% 0 0 0;}

 

Parallelogram

1. Difficulties
Use skew () for diagonal stretching to implement Parallelogram
When one parameter is set, it indicates the horizontal skew angle.
Two parameters: the first parameter indicates the horizontal tilt angle, and the second parameter indicates the vertical tilt angle.

#box {    transform:skew(-45deg);}

 

However, this results in Oblique deformation of its content, which is not nice and hard to read.
Is there a way to tilt the shape of the container and keep its content unchanged?

2. Set the Element Scheme
We can apply a reverse skew () deformation to the content to offset the container deformation.
Results, and finally produce the expected results.

<a href="#yolo" class="button"><div>Click me</div></a><style>.button { transform: skewX(-45deg); }.button > div { transform: skewX(45deg); }</style>

 

3. Pseudo-Element Solution
Another idea is to apply all styles (backgrounds, borders, etc.) to pseudo elements, and then
Deformation of pseudo elements. Because our content is not included in the pseudo element, the content is not
Will be affected by deformation. Next let's see if this technique can get the same link style as the previous one.
In this case, the blocks generated by pseudo elements overlap the content. You can set the z-index:-1 style for the pseudo elements.

. Button {width: 200px; height: 200px; position: relative;/* Other text colors, margins, and other styles ...... */}. Button: before {content: '';/* use a pseudo element to generate a rectangle */position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: inherit; height: inherit; z-index:-1; background: # 58a; transform: skew (45deg );}

 

Triangular Images

1. Difficulties
Use rotate ()

2. deformation-based solutions
You need to wrap the image with a <div> and apply the opposite rotate () to the image ()
Deformation style:

<div class="picture"></div>

 

.picture {    width: 400px;    transform: rotate(45deg);    overflow: hidden;}.picture > img {    max-width: 100%;    transform: rotate(-45deg);}

 

The above produce an octagonal image and do not produce a prism

You can use scale () to solve the problem:

.picture {    width: 400px;    transform: rotate(45deg);    overflow: hidden;}.picture > img {    max-width: 100%;    transform: rotate(-45deg) scale(1.42);}

 

3. Cropping path scheme
The above method does work, but it is basically an hack. This method requires a Layer
The extra HTML Tag is not concise enough; the Code itself is not intuitive enough; it is not even healthy enough
Strong -- if we happen to be processing a non-square image, this trick will be invisible.

In fact, we still have a better way to complete this task. Its main idea is
Use the clip-path attribute.

The cropping path allows us to crop an element to any shape we want. In this example
, We will use the polygon () (polygon) function to specify a diamond. Actually, it
Allows us to use a series of coordinate points (separated by commas) to specify arbitrary polygon. We even
Percent values can be used, which are parsed into the size of the element itself. The Code is as follows:

-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

 

Effect

1. Difficulties

2. Solution
1> gradient
Bottom right corner:

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

 

Four Corners:

#box {    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% 50%;    background-repeat: no-repeat;}

 

3. arc tangent
It can be used to create an arc corner (many people also use this
The effect is called "Inner Concave rounded corner" because it looks like the reverse version of the rounded corner ). Unique difference
Yes, we will use radial gradient to replace the above linear gradient:

#box {    background: #58a;    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% 50%;    background-repeat: no-repeat;}

 

5-step Tab

1. Difficulties
Trapezoid
They are all shapes that are hard to generate with CSS,

2. Solution

transform: perspective(.5em) rotateX(5deg);

 

3D deformation is applied to the entire element, so the text above it is also deformed. 3D is used for elements.
After deformation, the internal deformation effect is "irreversible", which is different from 2D deformation.
(Under the 2D deformation system, the Internal Reverse deformation can offset the external deformation effect)
The only feasible way is to apply the deformation effect to the pseudo-element.
.

. Tab {position: relative; display: inline-block; padding :. 5em 1em. 35em; color: white ;}. tab: before {content: '';/* use a pseudo element to generate a rectangle */position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index:-1; background: # 58a; transform: perspective (. 5em) rotateX (5deg );}