如何重塑一个div看和切边的反应？

Question

​

​

​

​

我不知道谷歌是否已经有了答案，但我的斗争是，我只是不能正确地说出这一点，所以什么也没有出现。以下是div的样式：

<div className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">

在div内部是不相关的，因为它只是用图像源显示名称和描述，这就是为什么我没有在这里添加它。正如我们所看到的，这是在反应中使用转子类。我想知道是否有一种方法来达到第二图片的意思，切边，并取代它的背景色。如果还有什么需要我发的，请告诉我。但我认为这是非常简单的。谢谢。

Answer 1

看看MDN上的边界半径文档。你会发现一个类似的例子，每个方向的半径都是可变的。

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

​

一个百分比半径将适用于更长的维度(高度)与较短的(宽度)，并看起来像你的效果。

下面是您可以修改的一个类似您的示例：

​

article {
  background: teal;
  height: 300px;
  width: 150px;
  padding: 10px;
}

article > div {
  background: cyan;
  border-radius: 60% 20px 60% 20px;
  height: 100%;
} 

<article>
  <div>
  </div>
</article>

​

如果你想要更精致的东西，比如定制曲线，我想你最好的选择是clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path。

生成复杂的路径有点烦人。clip-path的一个副作用是，无论是在悬停时移动路径，还是在加载时设置路径，使其动画化的CSS看起来都很棒。