HTML and css code to get the expected pointer structure

Issue

Can some one tell me how to get the below pointer like this

enter image description here

I tried the below code

.base-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 63px;
  position: absolute;
  bottom: 0;
  background-color: #1a3673;
}

.left-design {
  width: 50%;
  background-color: #fff;
  border-start-end-radius: 176px 67px;
}

.right-design {
  width: 50%;
  background-color: #fff;
  border-start-start-radius: 176px 67px;
}

<div class="base-container">
  <div class="left-design">
  </div>
  <div class="right-design">
  </div>
</div>

But I am getting something like below. Can you please correct me where I am doing wrong?

enter image description here

Solution

You can try to adjust the borders by percentage. This is one way you can attain it.

.base-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 63px;
    position: absolute;
    bottom: 0;
    background-color: #1a3673;
  }

  .left-design {
    width: 50%;
    background-color: #fff;
    border-start-end-radius: 80% 200%;
    margin-top:20px;
    margin-right:-4px;
    
  }

  .right-design {
    width: 50%;
    background-color: #fff;
    border-start-start-radius: 80% 200%;
    margin-top:20px;
    margin-left:-4px;
  }

<div class="base-container">
        <div class="left-design">

        </div>
        <div class="right-design">

        </div>
    </div>

Answered By - Crystal