Creating different types of arrows with css

Question

I am a beginner and started to copy some websites to practice. So I need to create a shape like this:

shape:

But this is what I got with the code I found, which I tried to adapt:

That's my code:

.arrow{
    width: 400px;
    height: 400px;
    padding: 0 0 0 100px;
    float:left;
    box-shadow: -2px 2px 0 #FFFFFF;
    transform: rotate(315deg);
    margin: 0 0 10% 30%;
}

anyone can help or send me tutorials about creating this type of shape?

Answer 1

simply like below with two rotate pseudo element:

 .arrow { width:600px; /* adjust this */ height:20px; /* this */ margin:80px 0; position:relative; }.arrow::before, .arrow::after { content:""; position:absolute; bottom:0; width:50%; height:100%; background:red; border-radius:100px; /* a big value */ transform-origin:calc(100% - 10px) 50%; /* 10px is half the height */ transform:scaleX(var(--s,1)) rotate(10deg); /* and rotation here */ }.arrow::before { --s:-1; }

 <div class="arrow"></div>