CSS realizes corner cutting + border + projection + content background color gradient effect

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: Mask

Other 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-path

The 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!

<<:  Node connects to MySQL and encapsulates its implementation code for adding, deleting, modifying and checking

>>:  Summary of the use of Datetime and Timestamp in MySQL

Recommend

How to output Chinese characters in Linux kernel

You can easily input Chinese and get Chinese outp...

5 ways to achieve the diagonal header effect in the table

Everyone must be familiar with table. We often en...

Vue implements the digital thousands separator format globally

This article example shares the specific code for...

Steps to build a Docker image using Dockerfile

Dockerfile is a text file that contains instructi...

How to store images in MySQL

1 Introduction When designing a database, it is i...

How to achieve centered layout in CSS layout

1. Set the parent container to a table and the ch...

Mysql5.7 my.ini file loading path and data location modification method under windows7

Update: Now you can go to the MySQL official webs...

SQL GROUP BY detailed explanation and simple example

The GROUP BY statement is used in conjunction wit...

Tutorial on installing and using virtualenv in Deepin

virtualenv is a tool for creating isolated Python...

How to use limit_req_zone in Nginx to limit the access to the same IP

Nginx can use the limit_req_zone directive of the...

Summary of several submission methods of HTML forms

The most common, most commonly used and most gener...

How to create a view in MySQL

Basic syntax You can create a view using the CREA...

Details on using JS array methods some, every and find

Table of contents 1. some 2. every 3. find 1. som...

Comparison of two implementation methods of Vue drop-down list

Two implementations of Vue drop-down list The fir...

Mysql NULL caused the pit

Using NULL in comparison operators mysql> sele...