如何在css中实现水滴效果？

Question

我的网站上有以下设计。如何实现这种反转圆角效果？

我确信有几种方法。我正在寻找最简单，最优雅的方式来做到这一点。

如果你能在答案中分享一个人，我会很高兴。

Answer 1

一个简单的（但可能存在缺陷，因为我目前正在使用设定值）解决方案是使用伪效果：

您也可以悬停片段以查看其构造方式：

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
.upper {
  height: 300px;
  width: 540px;
  background: gray;
  position: relative;
}
.circle {
  border-radius: 50%;
  background: tomato;
  height: 100px;
  width: 100px;
  line-height:100px;
  display: inline-block;
  position: absolute;
  bottom: -70px;
  left: 200px;
  border: 20px solid white;
  text-align:center;
  transition:all 0.8s;
}
.circle:hover{
  border: 20px solid tomato;
  background:lightgray;
  }
.upper:before {
  content: "";
  position: absolute;
  border-radius: 0 0 25px 0;
  background: gray;
  height: 50px;
  width: 200px;
  bottom: -25px;
  transition:all 0.8s;
}
.upper:after {
  content: "";
  position: absolute;
  border-radius: 0 0 0 25px;
  background: gray;
  height: 50px;
  width: 200px;
  bottom: -25px;
  transition:all 0.8s;
  right: 0;
}
.upper:hover:before,.upper:hover:after{
  background:tomato;
  }

＆＃13;

<div class="upper">
  <div class="circle">Hover Bits</div>
</div>

＆＃13;

＆＃13;

＆＃13;

---

假设你的下半部分是白色/纯色。

---

基本上是：

+---------------------------------+
|                                 |
|                                 |
|                                 |
|               ____              |
|              /    \             |
+-------------| text |------------+
               \____/  <-- has really thick border

+---------------------------------+
|                                 |
|                                 |
|                                 |
|____________   ____    __________|
|            \ /    \  /          |
+------------|| text ||-----------+
|____________/ \____/  \__________| <-- pseudo element 

将离开：

+---------------------------------+
|                                 |
|                                 |
|                                 |
|               ____              |
|              /    \             |
+             | text |            +
|____________/ \____/  \__________|