javascript - CSS/jQuery - 是否可以创建此形状(类似于倒圆)

Question

我不知道如何在 Angular 落制作倒圆圈之类的东西。为了更好地理解，我附上了图片。

这甚至可以使用 CSS3 或 jQuery 创建吗？

Answer 1

我建议如何创建该形状 SVG。

CSS解决方案:
使用与背景匹配的前后元素。

.shape {
  position: relative;
  width: 400px;
  height: 120px;
  background-color: cornflowerblue;
  text-align: center;
  color: white;
  line-height: 120px;
}
/*replace with "" if your going to use the code*/

.shape:before {
  content: "↙";
  font-size: 2.5em;
  text-indent: 35%;
  line-height: 0%;
  position: absolute;
  top: calc(100% - 20px);
  left: 0;
  width: 35%;
  height: 50%;
  background-color: white;
  border-top-right-radius: 15px;
}
.shape:after {
  content: "↘";
  line-height: 0%;
  text-indent: -43%;
  font-size: 2.5em;
  position: absolute;
  top: calc(100% - 20px);
  right: 0;
  width: 35%;
  height: 50%;
  background-color: white;
  border-top-left-radius: 15px;
}
.shape .extra {
  position: absolute;
  top: 100%;
  background-color: cornflowerblue;
  width: 30%;
  height: 30%;
  left: 35%;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

<div class="shape">This is not a problem any more
  <div class="extra"></div>
</div>

SVG: 使用路径元素，然后使用贝塞尔曲线命令。
MDN paths

<svg width="300px" viewbox="0 0 100 60">
  <path fill="cornflowerBlue" d="m 0,0 
                                 100,0 
                                 0,30
                                 -25,0
                                 c-5,0 -5,0 -5,5
                                 v20
                                 c0,5 0,5 -5,5
                                 h-30
                                 c-5,0 -5,0 -5,-5
                                 v-20
                                 c 0,-5 0,-5 -5,-5
                                 h-25z" />
</svg>