Problem in generating a clip path using pure CSS as shown in picture

Question

I'm trying to generate a clip path for my project. it should look like this:

The corners should be curved.

Can someone help me do this? Here's what I did:

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

I'm getting an output similar to this:

How can I do this using clip path?
Or is my approach (clip path) wrong? Help me make this icon using only CSS?

ttrasn · Accepted Answer · 2019-11-09 11:22:35Z

1

To curve clip-path is css you must use ellipse, but with ellipse you can not draw polygon, so best answer for your question is to draw svg clip-path then use it in css with clip-path: url(#clipped);

also see this answer

answered Nov 9, 2019 at 11:22

ttrasn

4,8975 gold badges34 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ritik Over a year ago

Hi, this answered my doubt on curving the corner. But my main question is to generate that logo. How can I do so? Because I think I'm close but not able to finish it. If you can help me further.

Collectives™ on Stack Overflow

Problem in generating a clip path using pure CSS as shown in picture

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related