CSS中的圆角矩形棱镜

Question

使用CSS，我正在尝试创建一个带有圆边的矩形棱镜，如下图所示。

到目前为止，我已经指定了顶部和底部的边界半径。问题是我不知道如何让另一边的左右边缘向内卷曲。因此，角落处不应有任何孔。是否有某些CSS属性或技巧可以用来做到这一点？

来自https://jsfiddle.net/jkantner/oqo73a2h/的代码：

.cube {
  top: 100px;
  left: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(-45deg);
}

.left, .right, .front, .top, .back, .bottom {
  position: absolute;
}

.left, .right {
  background: #06a;
  width: 150px;
  height: 150px;
}

.front, .back {
  background: #048;
  width: 300px;
  height: 150px;
}

.top, .bottom {
  background: #08c;
  border-radius: 30px;
  width: 300px;
  height: 150px;
}

.front {
  z-index: 2;
}

.top {
  transform-origin: 0% 100%;
  transform: translateY(-150px) rotateX(-90deg);
  z-index: 2;
}

.left {
  transform-origin: 100% 100%;
  transform: translateX(-150px) rotateY(90deg);
  z-index: 2;
}

.right {
  transform-origin: 0% 0%;
  transform: translateX(300px) rotateY(-90deg);
}

.back {
  transform: translateZ(150px);
}

.bottom {
  transform-origin: 0% 0%;
  transform: translateY(150px) rotateX(90deg);
}

<div class='cube'>
  <div class='front'></div>
  <div class='top'></div>
  <div class='left'></div>
  <div class='right'></div>
  <div class='back'></div>
  <div class='bottom'></div>
</div>

Answer 1

如果指定左侧和右侧以及正面和背面的边框半径，就像您对顶部和底部所做的那样：

.left, .right {
  background: #06a;
  border-radius: 30px;
  width: 150px;
  height: 150px;
}

.front, .back {
  background: #048;
  border-radius: 30px;
  width: 300px;
  height: 150px;
}

您将看到圆角矩形棱镜，如here所示。