时间戳

首页 > 解决方案 > 如图所示，使用纯 CSS 生成剪辑路径时出现问题

html - 如图所示，使用纯 CSS 生成剪辑路径时出现问题

问题描述

我正在尝试为我的项目生成剪辑路径。它应该是这样的：

标识

角落应该是弯曲的。

有人可以帮我这样做吗？这是我所做的：

<div class="logo"></div>
<style>
.logo{
    position: absolute;
    width: 50px;
    height: 50px;
    left: calc(50% - 25px);
    top: 25px;
    background-color: black;
    clip-path: polygon(50% 0, 0% 100%, 50% 85%, 50% 10%, 93% 93%, 
                       50% 80%, 50% 1%, 50% 86%, 100% 100%, 50% 0);
}
</style>

我得到类似这样的输出：

我的输出

如何使用剪辑路径执行此操作？
还是我的方法（剪辑路径）错误？帮我只使用 CSS 制作这个图标？

标签： htmlcssuser-interfaceclip

解决方案

要弯曲剪辑路径是 css，您必须使用椭圆，但使用椭圆不能绘制多边形，因此您问题的最佳答案是绘制 svg 剪辑路径，然后在 css 中使用clip-path: url(#clipped);

也看到这个答案

推荐阅读