前端纯CSS特效丨用几行 CSS 代码实现超炫内切角效果的神秘代码大揭秘

七夏（UID：1） · 发表于 2024-10-21 10:35:16

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

在前端开发的奇妙领域中，总有一些代码如同魔法一般，能创造出令人惊叹的视觉效果。今天，就让我们一同深入探索一段神奇的代码，它以最简单的方式实现了令人称奇的内切角效果。

当我们看到以下这段代码时，仿佛进入了一个充满创意与技巧的世界。

方式一效果如下

code

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>最简单方式实现内切角</title>
</head>
<style>
  div {
    position: relative;
    width: 20vw;
    height: 8vw;
    margin: 1vw auto;
    border-radius: 1vmin;
    overflow: hidden;
    line-height: 8vw;
    color: #fff;
    text-align: center;
  }

  .div1::before {
    position: absolute;
    content: "";
    top: -2vw;
    left: -2vw;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    box-shadow: 0 0 0 15vw #e91e63;
    z-index: -1;
  }

  .div1::after {
    position: absolute;
    content: "";
    bottom: -2vw;
    right: -2vw;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    box-shadow: 0 0 0 15vw #e91e63;
    z-index: -1;
  }


</style>

<body>
  <div class="div1"></div>
</body>

</html>

对于 .div1，通过巧妙运用 ::before 和 ::after 伪元素，结合 box-shadow 的强大功能，创造出了独特的视觉效果。从绝对定位的设置，到元素大小和圆角的把控，每一个细节都经过精心雕琢。而那鲜艳的 #e91e63 颜色，如同魔法的光芒，为元素增添了无限魅力。

方式二效果如下

code

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>最简单方式实现内切角</title>
</head>
<style>
  div {
    position: relative;
    width: 20vw;
    height: 8vw;
    margin: 1vw auto;
    border-radius: 1vmin;
    overflow: hidden;
    line-height: 8vw;
    color: #fff;
    text-align: center;
  }

  .div2 {
    background-size: 70% 70%;
    background-image:
      radial-gradient(circle at 100% 100%, transparent 0, transparent 2vw, #03A9F5 2vw),
      radial-gradient(circle at 0 0, transparent 0, transparent 2vw, #03A9F5 2vw),
      radial-gradient(circle at 100% 0, transparent 0, transparent 2vw, #03A9F5 2vw),
      radial-gradient(circle at 0 100%, transparent 0, transparent 2vw, #03A9F5 2vw);
    background-repeat: no-repeat;
    background-position: right bottom, left top, right top, left bottom;
  }
</style>

<body>
  <div class="div2"></div>
</body>

</html>

.div2 则另辟蹊径，利用 radial-gradient 径向渐变来构建内切角的效果。通过精心设置渐变的参数、位置和重复方式，打造出了别具一格的视觉呈现。多种颜色和形状的组合可能性，为前端开发者们提供了广阔的创意空间。

前端纯CSS特效丨用几行 CSS 代码实现超炫内切角效果的神秘代码大揭秘

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

方式一效果如下

code

方式二效果如下

code

快速回帖

分享帝

龙年限定

关于楼主

商务推广

前端纯CSS特效丨用几行 CSS 代码实现超炫内切角效果的神秘代码大揭秘

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

方式一 效果如下

code

方式二 效果如下

code

快速回帖

分享帝

龙年限定

关于楼主

商务推广

方式一效果如下

方式二效果如下