我如何使用 html 和 css 创建弯曲的 3D 对象

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cube {
  background: #dc2e2e;
  width: 200px;
  height: 50px;
  position: relative;
  margin: 50px;
  transform: rotate(32deg);
}

.cube::before {
  content: '';
  display: inline-block;
  background: #f15757;
  width: 200px;
  height: 2px;
  transform: skewX( -80deg);
  position: absolute;
  top: -2px;
  left: 6px;
}

.cube::after {
  content: '';
  display: inline-block;
  background: #9e1515;
  width: 12px;
  height: 50px;
  transform: skewY(-10deg);
  position: absolute;
  top: -1px;
  left: 100%;
}

<div class="container">
  <div class="cube"></div>
</div>

.cube {
  background: #dc2e2e;
  width: 200px;
  height: 50px;
  position: relative;
  margin: 50px;
  box-shadow: 0px 10px 16px -6px black;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="container">
<div class="cube"></div>
</div>

.arch {
  width: 200px;
  overflow: hidden;
}
.lowerarc {
  width: 240px;
  position: relative;
  right: -10px;  
  left: -20px;
  height: 80px;
  background-color: black; 
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.upperarc {
  height: 80px;
  position: relative;
  width: 240px;
  top: -120px;
  right: -10px;
  left: -20px;
  background-color: white; 
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%; 
}

<div class="arch">
  <div class="lowerarc"></div>
  <div class="upperarc"></div>
</div>

<svg width="200">
<path d="M0,0 L0,50 Q100,80 200,50 L200,0 Q100,25 0, 0z" fill="black" />
</svg>

<svg viewBox="0 0 1000 400">
  <path d="M 60,250 C 60,150 150,50 250,50" fill="none" 
stroke="green" stroke-width="50"></path>
</svg>

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

c.beginPath();
c.moveTo(60, 0);
c.lineTo(10, 0);
c.quadraticCurveTo(0, 170, 170, 250);
c.lineTo(195, 210);
c.quadraticCurveTo(50, 150, 60, 0);
c.fill();

<canvas id="canvas" width="622" height="1080"></canvas>

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

c.fillStyle="rgba(0, 0, 25, 0.7)";
c.beginPath();
c.moveTo(10, 0);
c.lineTo(0, 5);
c.quadraticCurveTo(-10, 180, 170, 260);
c.lineTo(195, 220);
c.lineTo(195, 210);
c.quadraticCurveTo(30, 250, 60, 0);
c.fill();

c.fillStyle="rgb(200, 210, 200)";
c.beginPath();
c.moveTo(60, 0);
c.lineTo(10, 0);
c.quadraticCurveTo(0, 165, 170, 250);
c.lineTo(195, 210);
c.quadraticCurveTo(50, 135, 60, 0);
c.fill();

<canvas id="canvas" width="622" height="1080"></canvas>
<script src="main.js">
</script>