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
Detailed explanation of Vue routing router
Table of contents Using routing plugins in a modu...
A brief discussion on innodb's index page structure, insert buffer, and adaptive hash index
Physical Structure of an InnoDB Index All InnoDB ...
React Native startup process detailed analysis
Introduction: This article takes the sample proje...
How to use crontab to backup MySQL database regularly in Linux system
Use the system crontab to execute backup files re...
3 common errors in reading MySQL Binlog logs
1. mysqlbinlog: [ERROR] unknown variable 'def...
7 useful new TypeScript features
Table of contents 1. Optional Chaining 2. Null va...
How to modify the user and group of a file in Linux
In Linux, when a file is created, the owner of th...
Will MySQL execute the update statement again if it has the same data as the original one?
background This article mainly tests whether the ...
Vue implements the magnifying glass effect of tab switching
This article example shares the specific code of ...
MySQL string splitting operation (string interception containing separators)
String extraction without delimiters Question Req...
Detailed explanation of Linux kernel macro Container_Of
Table of contents 1. How are structures stored in...
Use momentJs to make a countdown component (example code)
Today I'd like to introduce a countdown made ...
Vue implements horizontal beveled bar chart
This article shares the specific code of Vue to i...
Tutorial on using Webpack in JavaScript
Table of contents 0. What is Webpack 1. Use of We...
Detailed tutorial on Tomcat installation and deployment in Windows 10
Table of contents 1 Java environment configuratio...