前端纯CSS特效丨用几行 CSS 代码实现超炫内切角效果的神秘代码大揭秘
> 在前端开发的奇妙领域中，总有一些代码如同魔法一般，能创造出令人惊叹的视觉效果。今天，就让我们一同深入探索一段神奇的代码，它以最简单的方式实现了令人称奇的内切角效果。>
> 当我们看到以下这段代码时，仿佛进入了一个充满创意与技巧的世界。
### 方式一 效果如下
### 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 径向渐变来构建内切角的效果。通过精心设置渐变的参数、位置和重复方式，打造出了别具一格的视觉呈现。多种颜色和形状的组合可能性，为前端开发者们提供了广阔的创意空间。
页:
[1]