相关疑难解决方法(0)

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

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

我看到使用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%);
}

它看起来像这样：

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

编辑：

这是我需要的最终结果：

关于我如何能够获得圆角的任何想法都可以使用多个边框？盒子将是动态的,取决于盒子里的内容,所以我不能添加静态宽度或高度.

    body { background: #d2d1d0; }

    #box {
        border-radius: 15px;
        background: #f4f4f4;
        border: 1px solid #bbbbbb;
        width: 100%;  
        height: 100%;
        margin: 10px auto;
        position: relative;
    }

    DIV#box, #box:before, #box:after {
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    #box:before {
        border-radius: 15px;
        border: 1px solid white;
        width: 99%;  
        height: 94%;
        content: '';
        position: absolute;
    }

    #box:after {
        border-radius: 15px;
        content: '';
        position: absolute;
        border: 1px solid #bbbbbb;
        width: 98%;  
        height: 90%;
        left: 1px; top: 1px;
    }

HTML

<div id="box">Hello World!!!!<br>THIS IS SECOND LINE …