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>