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