Проблема в создании пути клипа с использованием чистого CSS, как показано на рисунке - PullRequest
Новая
       28

Проблема в создании пути клипа с использованием чистого CSS, как показано на рисунке

1 голос
/ 09 ноября 2019

Я пытаюсь сгенерировать путь клипа для своего проекта. это должно выглядеть так:

Logo

Углы должны быть изогнутыми.

Может кто-нибудь помочь мне сделать это? Вот что я сделал: 

<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>

Я получаю вывод, похожий на этот:

My Output

Как я могу это сделатьиспользование пути клипа?
Или мой подход (путь клипа) неверен? Помогите мне сделать эту иконку используя только CSS?

1 Ответ

1 голос
/ 09 ноября 2019

Чтобы кривая пути клипа была css, вы должны использовать эллипс, но с помощью эллипса вы не можете рисовать многоугольник, поэтому лучший ответ на ваш вопрос - нарисовать клип-путь svg, а затем использовать его в css с clip-path: url(#clipped);

также см. этот ответ

...