CSS为混合应用程序页面创建非矩形标题

Question

我正在为混合Cordova / Android应用程序的页面设计布局，在这里我需要使用非标准而非矩形的标题。我想要获得的形状如下图所示

我正在尝试使用纯CSS3完成此操作，到目前为止，结果如下所示。

 body,html{padding:0;margin:0}
 .ust
 {
  height:4vh;
  width:100vw;
  position:relative;
  background-color:orange;
  display:block;
 }
 .oval
 {
  position:absolute;
  height:12vh;
  width:160vw;
  top:1vh;
  left:-30vw;
  border-radius:100%;
  background-color:orange;
  display:block;
 }
 .timer
 {
  position:absolute;
  height:10vh;
  width:10vh;
  border-radius:100%;
  background-color:orange;
  left:calc(50vw - 5vh);
  top:9vh;
 }

<div class='ust'>
 <div class='oval'>&nbsp;</div>
 <div class='timer'>&nbsp;</div>
</div>

我的努力看起来并不像我要复制的版本那样安静，主要是因为“计时器”元素与“椭圆”相遇的方式-在一个尖锐的角落。样本图像中的连接处的圆度缺失。

我尝试使用timer::before/after伪元素并使用它们各自的边界在圆度方面进行工作，但是尝试尝试可能无法获得凹面结效果。

我将非常感谢任何能够提出实现此目标的方法的人。

Answer 1

一个很好的方法是使用剪切路径。这是一个很棒的网站，可以生成创建独特形状所需的CSS代码：

https://bennettfeely.com/clippy