如何让div的一侧曲线化

Question

如何让div的一边在悬停时弯曲？在我移开它之前，div就是这样的：

当我在div上移动点时，就像这样：

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

Answer 1

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

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

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

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

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

以上是所谓的＆＃34; slash syntax＆＃34 ;;但是，它有点简写：no slash is present（参考MDN脚注）。第二个值是＆＃34;垂直半径＆＃34;。在上述情况下，对于对称外观，两个值对必须与-right和-left匹配。