CSS realizes corner cutting + border + projection + content background color gradient effect
|
Simply use CSS to achieve all the effects of corner cutting + border + projection + content background color gradient. Because the UI does not have a background cutout, I think this can be achieved with CSS in theory. Take a look at the final effect:
First of all, let’s not talk about the purple-blue gradient of the content. A simple four-corner cut + black border + outline projection, in fact, just use the background: linear-gradient that is everywhere on the Internet to achieve the corner cut + a layer of pseudo-element that is 1px smaller to achieve the border + filter: box-shadow to achieve the projection. The effect and code are as follows:
<html>
<body>
<div class="box"></div>
</body>
<style>
body {
background-color: #55486b;
}
.box {
margin: 20px;
width: 200px;
height: 200px;
z-index: 0;
background: linear-gradient(
135 degrees,
transparent calc(10px + 1 * 0.414px),
#18121a 0
)
top left,
linear-gradient(
-135deg,
transparent calc(10px + 1 * 0.414px),
#18121a 0
)
top right,
linear-gradient(-45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
bottom right,
linear-gradient(45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
bottom left;
background-size: 55% 50%;
background-repeat: no-repeat;
position: relative;
filter: drop-shadow(1px 1px 2px rgba(255, 255, 255, 0.3));
}
.box::after {
z-index: 1;
width: calc(100% - 2 * 1px);
height: calc(100% - 2 * 1px);
content: "";
display: block;
background: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top left,
linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
background-size: 55% 51%;
background-repeat: no-repeat;
position: absolute;
left: 1px;
top: 1px;
}
</style>
</html>It is equivalent to cutting the four corners diagonally by piecing together a small section of transparent color + a large section of background color. The background-size should be greater than 50% to avoid white line bug. Put another layer of small pseudo-elements in the large div to realize the border. But since it is made up of four background colors, it seems impossible to achieve a gradient across the entire content. To achieve a gradient in the content area, we can change the idea. The pseudo-element background inside is gradient, and the four corners are cut off by other attributes. In this way, there are other implementation methods. Let's take a look at it first: Method 1: MaskOther things remain unchanged. The pseudo-element previously used the same idea as the outer layer to achieve corner cutting. This idea cannot achieve vertical gradient (because the corner cutting is already done by diagonal transparent color gradient). So directly write the background color as a gradient, and use the mask attribute to make the four corners transparent:
.box::after {
z-index: 1;
width: calc(100% - 2 * 1px);
height: calc(100% - 2 * 1px);
content: "";
display: block;
background: linear-gradient(180deg, #3c2f4f, #2e2269);
-webkit-mask: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top
left,
linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
-webkit-mask-size: 55% 51%;
-webkit-mask-repeat: no-repeat;
position: absolute;
left: 1px;
top: 1px;
}Just slightly change the style of the pseudo-element in the code above and you have it. Method 2: clip-pathThe clip-path attribute can directly trim the border around the element. If it is directly applied to the pseudo-element above, you will find that the shadow is also covered. So let's change our thinking and simply don't need the pseudo-element layer and directly trim the div into 4 corners. Because the filter attribute can be superimposed, add a filter to its parent element, the first n+1 drop-shadows are superimposed to form a black border, and the last drop-shadow realizes a light white projection. The effect is as follows:
<html>
<body>
<div class="outer">
<div class="box"></div>
</div>
</body>
<style>
body {
background-color: #55486b;
}
.outer {
filter: drop-shadow(0px 0px 1px #18121a) drop-shadow(0px 0px 1px #18121a)
drop-shadow(0px 0px 1px #18121a)
drop-shadow(2px 1px 3px rgba(255, 255, 255, 0.3));
}
.box {
margin: 20px;
width: 200px;
height: 200px;
border-radius: 12px;
position: relative;
background: linear-gradient(180deg, #3c2f4f, #2e2269);
-webkit-clip-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
);
clip-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
);
position: relative;
}
</style>
</html>I don't know if there is a simpler and more compatible method~~~~ This concludes this article about how to use CSS to achieve corner cutting + border + projection + content background color gradient effects. For more related CSS background color gradient content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
>>: Summary of the use of Datetime and Timestamp in MySQL
Recommend
A brief discussion on MySQL large table optimization solution
background The amount of new data in the business...
Detailed explanation of Vue mixin
Table of contents Local Mixin Global Mixins Summa...
Detailed tutorial on installing Python 3 virtual environment in Ubuntu 20.04
The following are all performed on my virtual mac...
Diagram of the Hyperledger Fabric 1.4 environment construction process under Windows 10
ContentsHyperledger fabric1.4 environment setup u...
Detailed examples of replace and replace into in MySQL into_Mysql
MySQL replace and replace into are both frequentl...
A comprehensive summary of frequently used statements in MySQL (must read)
The knowledge points summarized below are all fre...
Detailed explanation of Vue-router nested routing
Table of contents step 1. Configure routing rules...
Analysis and solution of a.getAttribute(href,2) problem in IE6/7
Brief description <br />In IE6 and 7, in a ...
A brief discussion on what situations in MySQL will cause index failure
Here are some tips from training institutions and...
How to limit access frequency, download rate and number of concurrent connections in Nginx
1. Overview of modules and instructions used to l...
3 ways to create JavaScript objects
Table of contents 1. Object literals 2. The new k...
Detailed explanation of the middleman mode of Angular components
Table of contents 1. Middleman Model 2. Examples ...
Vue implements page caching function
This article example shares the specific code of ...
JavaScript implementation of verification code case
This article shares the specific code for JavaScr...
HTML table tag tutorial (24): horizontal alignment attribute of the row ALIGN
In the horizontal direction, you can set the row ...