小编vbo*_*yko的帖子

我想创建一个彩虹视图堆栈，如下所示：

我知道边界半径属性，但是我还需要悬停，更改宽度和放样这些元素。

我看到使用clip-path属性可以解决此问题：

.item {
  height: 760px;
  width: 65px;
  background-color: aqua;
  transition: 0.3s ease-in-out;
  clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

它看起来像这样：

但是那些元素是笔直的，我该如何弯曲它们？

编辑：

这是我需要的最终结果：

我已经在VS代码中进行了美化，所以当我将其应用于

<div className="chatApp" style={style}>
    <Navigation />
    <ChatField />
</div>

我懂了

  <
  div className = "chatApp"
  style = {
    style
  } >
  <
  Navigation / >
  <
  ChatField / >
  <
  /div>

但我想要这样的东西

<div className = "chatApp"
 style = {
     style
 }>
     <Navigation />
     <ChatField />
 </div>

问题是如何更改美化设置以不将标签传输到新行（div，p，span等）？