如何让 div 的一侧弯曲

【问题标题】：How do I get the side of a div to curve如何让 div 的一侧弯曲
【发布时间】：2017-12-01 01:36:04
【问题描述】：

如何让 div 的一侧在悬停时弯曲？在我将点移到它上面之前，div是这样的：

当我将点移到 div 上时，它是这样的：

我应该如何编写 HTML 和 CSS 代码？

【问题讨论】：

向我们展示您迄今为止所做的尝试，我们将能够提供帮助。
欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
Rounded side, not rounded corners的可能重复

标签： html css

【解决方案1】：

我其实很喜欢这个问题；但是，我假设您在谈论白色区域。这是一些非常基本的 CSS 样式规则的好地方，从简单（border-radius 和 hover）开始。

对于以下方法，假设 HTML 结构如下：

 <div id="container">
     <div> content </div>
 </div>

如果您正在寻找从直线到曲线的基本、非动画过渡，您可以考虑以下 CSS 方法（您可能需要应用特定的 web-kit 以确保跨浏览器的一致性）：

#container:hover {
   border-top-left-radius: 100% 50px;
   border-top-right-radius: 100% 50px;    
}

上面是所谓的“slash syntax”；但是，它是一种速记：no slash is present（请参阅 MDN 脚注）。第二个值是“垂直半径”。在上述情况下，为了获得对称外观，-right 和 -left 的两个值对都必须匹配。

【讨论】：