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

我的努力看起来不像我试图复制的版本那么安静，主要是因为“计时器”元素与“椭圆形”相遇的方式 - 在一个尖 Angular 处。示例图像中交界处的圆度缺失。

我曾尝试使用 timer::before/after 伪元素处理圆 Angular ，并尝试使用它们各自的边界，但我可能无法获得凹形连接效果。

如果有人能提出实现此目标的方法，我将不胜感激。

Answer 1

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

https://bennettfeely.com/clippy