html - CSS 中的 flex DIV 边缘

Question

我试图在 css 中制作这些图像 Angular/边缘但没有结果:

如何在 CSS 中实现这一点？
这是我的尝试，但我无法获得图像中的确切形状。

div {
  background-color: black;
  width: 500px;
  height: 50px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div></div>

Answer 1

1. 创建一个容器div
   • css: overflow: hidden;

2. 在容器 div 中创建 3 个 div

   • 一个带有
     border-radius: 50% 的绿色矩形(盖子)； z-指数:2； box-shadow: 0 0 10px 黑色;
   • 左边一个矩形
   • 一个右边的矩形
   • 对于所有矩形使用:position: relative; 并重新定位它们。
     with left: [X]px, top: -[Y]px, float: left and float: right.

3. 使用动态测量来调整大小和位置，
   这样您的布局就会响应:例如:全部基于vw.

这是一个 fiddle 示例。 https://jsfiddle.net/warkentien2/mx11fh6b/2/
按照步骤操作会更简单。