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
Pitfalls and solutions for upgrading MySQL 5.7.23 in CentOS 7
Preface Recently, I found a pitfall in upgrading ...
JavaScript programming through Matlab centroid algorithm positioning learning
Table of contents Matlab Centroid Algorithm As a ...
js to achieve simple drag effect
This article shares the specific code of js to ac...
Docker-compose tutorial installation and quick start
Table of contents 1. Introduction to Compose 2. C...
Solution to the ineffective global style of the mini program custom component
Table of contents Too long to read Component styl...
Detailed explanation of JS WebSocket disconnection reasons and heartbeat mechanism
1. Disconnection reason There are many reasons wh...
What is TypeScript?
Table of contents 1. JavaScript issues 2. Advanta...
Implementation example of video player based on Vue
When the existing video player cannot meet the ne...
Detailed explanation of the use of CSS3 rgb and rgba (transparent color)
I believe everyone is very sensitive to colors. C...
Usage and performance optimization techniques of aggregate function count in MySQL
The environment of this article is Windows 10, an...
Summary of MySQL development standards and usage skills
1. Naming conventions 1. Database names, table na...
Analysis of the implementation process of Docker intranet penetration frp deployment
1. Create a configuration file directory cd /home...
Brief analysis of MySQL union and union all
In the database, both UNION and UNION ALL keyword...
Summary of basic usage of $ symbol in Linux
Linux version: CentOS 7 [root@azfdbdfsdf230lqdg1b...
MySQL SQL Optimization Tutorial: IN and RANGE Queries
First, let's talk about the in() query. It is...