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

Question

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

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

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

Answer 1

一个简单的(但可能是有缺陷的,因为我目前正在使用设定值)解决方案是使用伪效果:

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

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;
  }

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

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

基本上是:

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

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

会留下:

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