极客笔记如何使用纯 CSS 制作像图片上的形状
通过使用 CSS 中的剪辑，我们可以避免设计中的所有元素都像一个盒子一样。您可以通过使用各种基本形状或 SVG 来设计剪辑路径和您想要在网页上显示的形状。
网页元素都定义在一个矩形盒子内。但这并不意味着一切都必须具有盒子状外观。使用 CSS 的 clip-path 属性，您可以移除图像或其他元素的特定部分，以产生引人注目的效果。
让我们深入了解如何在纯 CSS 中制作像图片上的形状。
使用 SVG 元素
SVG 元素是一个定义了新坐标系统和视区的容器。它除了作为 SVG 文档的最外层元素之外，还可以用来嵌入另一个 SVG 或 HTML 文档中的 SVG 片段。
示例
在以下示例中，我们使用 SVG 绘制了一个形状，该形状是上传到网页上的图像。
<!DOCTYPE html>
<html>
<body>
<style>
img {
border: 4px #D5F5E3 solid;
border-top-left-radius: 25% 30%;
border-bottom-left-radius: 40% 10%;
border-top-right-radius: 30% 25%;
border-bottom-right-radius:70% 85%;
}
</style>
<img src="https://www.tutorialspoint.com/images/logo.png" style="width:100%">
</body>
</html>
当脚本被执行时，它将生成一个由图像和在网页上显示的图像上绘制的形状组成的输出。
使用polygon()
通过设定每个点的坐标， polygon() 函数可以让您定义尽可能多的点，以创建相当复杂的形状。
示例
考虑以下示例，我们使用 polygon() 函数在图像上绘制一个形状。
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
background-color: #EAFAF1 ;
padding: 21px;
border: 21px solid #D2B4DE ;
width: 201px;
height: 101px;
display: inline-block;
}
.shape {
clip-path: polygon(74% 1%, 99% 49%, 74% 101%, 1% 102%, 26% 52%, 1% 1%);
}
</style>
<div class="tutorial shape">
<img src="https://www.tutorialspoint.com/images/logo.png">
</div>
</body>
</html>
运行上面的脚本后，输出窗口将弹出，显示上传的图像以及在网页上显示的图像上绘制的形状。
使用ellipse()方法
由于椭圆实质上是一个被压扁的圆，它的行为与circle()方法非常相似，但还需要x轴和y轴的半径以及椭圆的中心值。
示例
运行下面的代码，看看 ellipse() 方法是如何用于在图像上绘制形状的。
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
background-color: #FCF3CF;
padding: 21px;
border: 22px solid #DE3163;
width: 201px;
height: 103px;
display: inline-block;
}
.shape {
clip-path: ellipse(130px 50px at center 70px);
}
</style>
<div class="tutorial shape">
<img src="https://www.tutorialspoint.com/images/logo.png">
</div>
</body>
</html>
当脚本被执行时，它将生成一个输出，其中包括在网页上显示的图像和在图像上绘制的形状。