HTML和css代码来获得预期的指针结构

Question

有人能告诉我如何获得下面的指针吗

在此处输入图像描述

我尝试了以下代码

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

但我得到了下面这样的东西。你能纠正我哪里做错了吗？

在此处输入图像描述

Answer 1

您可以尝试按百分比调整边框。这是你可以获得它的一种方式。

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