html - CSS 中的圆 Angular 直 Angular 棱柱

Question

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

到目前为止，我已经指定了顶部和底部的边界半径。问题是我不知道如何让另一边的左右边缘向内 curl 。因此，拐 Angular 处不应有任何孔洞。我可以使用某种 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

如果像对顶部和底部所做的那样，为左侧和右侧以及前后两侧指定 border-radius:

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

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

您将得到一个圆 Angular 直 Angular 棱镜，如图 here .