数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在纯 CSS 中创建像图片一样的形状？
通过在 CSS 中使用剪辑，我们可以避免设计中的所有内容都看起来像一个盒子。您可以设计一个剪辑路径和您想要在网页上显示的形状，方法是利用各种基本形状或 SVG。
网页元素都定义在矩形框内。但这并不意味着所有内容都必须具有盒状外观。使用 CSS clip-path 属性，您可以移除图像或其他元素的特定部分以产生醒目的效果。
让我们深入了解本文，以更好地理解如何在纯 CSS 中创建像图片一样的形状。
使用 SVG 元素
SVG 元素是一个容器，它定义了一个新的坐标系和视口。除了用作 SVG 文档的最外层元素外，它还可以用于将 SVG 片段嵌入到另一个 SVG 或 HTML 文档中。
示例
在下面的示例中，我们使用 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://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://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://tutorialspoint.com/images/logo.png">
</div>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含一个图像以及在网页上显示的图像上绘制的形状。
更新于: 2023年4月20日
879 次浏览
广告