CSS3 implements missing corner rectangle, folded corner rectangle and missing corner border
|
Preface A few days ago, I came across the feature of missing corner rectangle by chance. The first thought in my head was to make an absolutely positioned pseudo-element to block wherever needed, or to talk to the UI guy. Suddenly, an idea flashed in my mind, and I remembered the book "CSS Revealed" that I had read before. I remembered there was this chapter, so I wrote this article. Without further ado, let me show you a rendering first. Missing corner
1. Pseudo-element implementation <div class="bg cover"></div>
.bg{
width: 120px;
height: 80px;
background: #58a;
} /* The following elements all use this style*/
.cover{
position: relative;
}
.cover::before {
content: '';
width: 0;
height: 0;
position: absolute;
right: 0;
bottom: 0;
border: 5px solid #fff;
border-top-color: transparent;
border-left-color: transparent;
}
.cover::after{
content: '';
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
border: 5px solid #fff;
border-bottom-color: transparent;
border-right-color: transparent;
}Use a pseudo-element to draw a triangle with the same color as the background, and then absolutely position it where you need to block it, as shown below. However, this can only make two corners missing.
2. Gradual Implementation CSS Syntax background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
And the gradient can accept an angle (such as 45deg) as the direction, and the position information of the color stop can also be an absolute length value.
45deg: indicates the direction from lower left to upper right -45deg: indicates the direction from lower right to upper left ...... <div class="bg missAngle"></div>
.missAngle{
background: linear-gradient(-45deg, transparent 10px, #58a 0);
}
Achieve multiple angles <div class="bg rect"></div>
.rect{
background: linear-gradient(135deg, transparent 10px, #58a 0) top left,
linear-gradient(-135deg, transparent 10px, #58a 0) top right,
linear-gradient(-45deg, transparent 10px, #58a 0) bottom right,
linear-gradient(45deg, transparent 10px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
/* Internet Explorer 9 and earlier versions do not support gradients. */
}
This is actually made up of four graphics, as shown below
background-size: 50% 50%; means each small graphic is 50% wide and 50% high Arc cut corners <div class="bg cricle"></div>
.cricle{
background: radial-gradient(circle at top left, transparent 10px, #58a 0) top left,
radial-gradient(circle at top right, transparent 10px, #58a 0) top right,
radial-gradient(circle at bottom right, transparent 10px, #58a 0) bottom right,
radial-gradient(circle at bottom left, transparent 10px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
Finally, Internet Explorer 9 and earlier do not support gradients. There is a problem here. When the browser is pulled and the width is squeezed and is less than the defined width, a white gap may appear. You need to pay attention to this, as shown in the following figure
When the background image is a picture, the gradient will not work well if the corners are missing. Next, please use clip-path Clip-path implementation The clip-path CSS property creates a clipping region where only part of an element is visible. The part inside the area is displayed, and the part outside the area is hidden. clip-path: polygon(xy, x1 y1, x2 y2, x3 y3, ...) xy, x1 y1, x2 y2, x3 y3, ... These represent the points in the coordinate axis. Draw a closed figure based on all the points. <div class="bg rect-clip"></div>
.rect-clip{
background-image: url(./im.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px,
100% calc(100% - 15px), calc(100% - 15px) 100%,
15px 100%, 0 calc(100% - 15px), 0 15px)
}Effect picture:
Total width is 120px calc(100% - 15px) => 105px 100% => 120px
Connect the corresponding points to form a missing corner rectangle The function of clip-path is quite powerful. It can draw various shapes, such as diamonds, five-pointed stars, etc. <div class="bg clip5"></div>
.clip5{
margin-left: 30px;
/*clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);*/
clip-path: inset(0 round 0 25%); /* Can be abbreviated*/
/* inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>) */
/* inset uses four values (corresponding to the order of "top, right, bottom, left") to set the corner radius. */
}
For animation <div class="line-box"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> </div>
.line-box{
width: 100px;
height: 60px;
}
.line{
width: 100%;
height: 100%;
background: #26b91a;
}
.line1{
-webkit-clip-path: polygon(80% 0, 40% 40%, 80% 80%);
clip-path: polygon(80% 0, 40% 40%, 80% 80%);
animation: a 2s 1s infinite;
}
.line2{
clip-path: polygon(10% 10%, 60% 40%, 50% 90%);
animation: b 2s 1s infinite;
}
.line3{
clip-path: polygon(20% 20%, 30% 20%, 30% 50%, 20% 50%);
animation: c 2s 1s infinite;
}
@keyframes a{
90% {
background: #1f351f;
}
100% {
clip-path: polygon(50% 40%, 25% 100%, 75% 100%);
}
}
@keyframes b{
90% {
background: #1f351f;
}
100% {
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
}
}
@keyframes c{
90% {
background: #1f351f;
}
100% {
clip-path: polygon(40% 0, 60% 0, 60% 100%, 40% 100%);
}
}
Only some of the functions of clip-path are listed here. For more shapes, click here . It is a website that can generate various shapes (including arbitrary drag and drop customization) and directly generate code. Although this can draw various shapes, the compatibility is not very good. It works fine with Google version 79 and Firefox 71, but not IE. For specific compatibility, please see here If the project needs to consider compatibility issues, you can also put an image as the background image, compress the image, or use pseudo elements with only two missing corners at most. Choose the solution that suits your project according to the actual situation. Missing corner border <div class="out-rect"> <div class="in-rect"></div> </div>
.out-rect {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 80px;
padding: 5px;
background: linear-gradient(-45deg, transparent 10px, #58a 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.in-rect{
width: 100%;
height: 100%;
background: linear-gradient(-45deg, transparent 8px, #fff 0) top right;
background-size: 100% 100%;
background-repeat: no-repeat;
}
The effect of two missing corner rectangles superimposed, the width and height of the inner rectangle follow the size of the parent div, as long as it is kept vertically centered, the padding value is the width of the final rendered border Fold Corner Still using the linear-gradient gradient, there is an additional corner on the basis of the missing corner rectangle The effect diagram is as follows:
First implement the first <div class="bg foldingAngle"></div>
.bg{
width: 120px;
height: 80px;
background: #58a;
}
.foldingAngle{
background:
linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4em 1.4em,
linear-gradient(-135deg, transparent 1em, #58a 0);
}Rendering
linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 0 / 1.4em 1.4em Towards the lower left, draw a gradient of half transparent and half black, position: 100% 0 size: 1.4em 1.4em as follows:
size is 1.4em 1.4em This triangle is a 45° right triangle with a right angle of 1.4em and a hypotenuse of 1.4/√2 ≈ 1 So draw a rectangle with a missing corner of 1em linear-gradient(-135deg, transparent 1em, #58a 0) -135deg Draw a missing corner rectangle towards the lower left
The two gradients overlap, so the effect is as follows:
Be sure to draw the small triangle first, then the missing corner rectangle, otherwise the rectangle will cover the small triangle Lower right corner <div class="bg foldingAngle2"></div>
.foldingAngle2{
background:
linear-gradient(to left top, transparent 50%, rgba(0, 0, 0, 0.4) 0) no-repeat 100% 100% / 1.4em 1.4em,
linear-gradient(-45deg, transparent 1em, #58a 0);
}
This looks a bit unrealistic, and in reality the angles are not always 45°. Draw a 30° angle below, first draw a missing corner rectangle <div class="bg foldingAngle2"></div>
.foldingAngle2{
margin-top: 30px;
position: relative;
border-radius: .3em;
background: linear-gradient(-150deg, transparent 1em, #58a 0);
}
Next, draw the corners According to the red numbers in the above picture, the corner width is 2/√3 ≈ 1.15em. Length: 2em. Draw the corner.
.foldingAngle2::before{
content: '';
position: absolute;
right: 0;
top: 0;
width: 1.15em;
height: 2em;
background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
border-bottom-left-radius: inherit;
}
Give it a spin
.foldingAngle2::before{
content: '';
position: absolute;
right: 0;
top: 0;
width: 1.15em;
height: 2em;
background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
transform: rotate(-30deg);
transform-origin: bottom right; /* Make the bottom right corner of the triangle the center of rotation*/
}
Move it up a bit, the offset is 2-1.15=0.85em, and add some shadow
.foldingAngle2::before{
content: '';
position: absolute;
right: 0;
top: 0;
width: 1.15em;
height: 2em;
background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3)) 100% 0 no-repeat;
transform: translateY(-0.85em) rotate(-30deg);
transform-origin: bottom right;
box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
border-bottom-left-radius: inherit; /* The lower left corner inherits border-radius */
}
This is the final effect Changing the angle and length and width calculations is a bit troublesome. You can use the preprocessor @mixin. Here I will only talk about the process without going into details. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Navicat for MySQL tutorial
>>: How to avoid garbled characters when importing external files (js/vbs/css)
Recommend
Mysql classic high-level/command line operation (quick) (recommended)
Since I need to learn how to build servers and da...
Learn more about MySQL indexes
1. Indexing principle Indexes are used to quickly...
How to use MySQL common functions to process JSON
Official documentation: JSON Functions Name Descr...
Vue imports excel table, and automatically downloads the data that failed to import
There is such a requirement: an import button, cl...
MySQL primary key naming strategy related
Recently, when I was sorting out the details of d...
A brief discussion on read-only and disabled attributes in forms
Read-only and disabled attributes in forms 1. Rea...
Mysql 5.6.37 winx64 installation dual version mysql notes
If MySQL version 5.0 already exists on the machin...
Web designers should optimize web pages from three aspects
<br />With the increase of bandwidth, there ...
InnoDB engine redo file maintenance method
If you want to adjust the size and number of Inno...
A brief discussion on simulating multi-threaded and multi-process crashes in Linux
Conclusion: In a multithreaded environment, if on...
Detailed installation and configuration of MySql on Mac
1. Download and install Download the community ed...
Detailed explanation of Vue save automatic formatting line break
I searched for many ways to change it online but ...
Some notes on modifying the innodb_data_file_path parameter of MySQL
Preface innodb_data_file_path is used to specify ...
Analysis of MySQL data backup and recovery implementation methods
This article uses examples to describe how to bac...
Vue basics MVVM, template syntax and data binding
Table of contents 1. Vue Overview Vue official we...