0

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

Logo

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:

My Output

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

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
Ritik
  • 137
  • 1
  • 12

1 Answers1

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

ttrasn
  • 4,322
  • 4
  • 26
  • 43
  • 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. – Ritik Nov 09 '19 at 13:20