如何在纯 CSS 中创建类似图像的形状?

cssweb developmentfront end technology更新于 2024/4/22 7:40:17

我们可以通过在 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://www.cainiaomax.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.cainiaomax.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.cainiaomax.com/images/logo.png">
      </div>
   </body>
</html>

当脚本执行时，它将生成一个输出，该输出由图像以及在网页上显示的图像上绘制的形状组成。