如何像推杆一样获得div的3D效果？

Question

我想像推杆一样在div上实现3D效果。我已经包含了图像并标记了我正在寻找的形状的区域。请指导我如何做到这一点。感谢。

我在这里放了3 div来获得黑色和绿色的效果，但div的形状必须像推杆一样。

这是我的HTML

<div class="puttercolordiv" id="about">
                        <span class="paint-area">&nbsp;</span>
                        <span class="paint-area">&nbsp;</span>
                        <span class="paint-area">&nbsp;</span>
                    </div>

让我的问题不合理的人也请提供答案，我不需要半径效果，我也需要曲线效果。

Answer 1

在这里：http://jsfiddle.net/43oew4h4/4/

＆＃13;

＆＃13;

#rounded {
  width: 250px;
  height: 500px;
  border-radius: 15% 50% 50% 15%;
  -moz-border-radius: 15% 50% 50% 15%;
  -webkit-border-radius: 15% 50% 50% 15%;
  position: relative;
  overflow: hidden;
  background-color: silver;
}

#inner {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 100px;
  background: black;
}

#inner2 {
  background: green;
  width: 100%;
  height: 160px;
  position: absolute;
  top: 70px;
}

#inner3 {
  background: black;
  width: 100%;
  height: 40px;
  position: absolute;
  top: 60px;
}

#rim {
  position: absolute;
  width: 90%;
  height: 100%;
  border-radius: 15% 50% 50% 15%;
  -moz-border-radius: 15% 50% 50% 15%;
  -webkit-border-radius: 15% 50% 50% 15%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
  background: -moz-linear-gradient(left, transparent 50%, rgba(255,255,255,0.7) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, transparent 50%,rgba(255,255,255,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, transparent 50%,rgba(255,255,255,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

＆＃13;

<div id="rounded">
  <div id="inner">
    <div id="inner2">
      <div id="inner3">
      </div>
    </div>
  </div>
  <div id="rim">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

下次请在您的问题中包含您目前所尝试的内容。

Answer 2

Border-radius是要走的路 - 你走在正确的轨道上：

div {
  display: inline-block;
  width: 50px;
  height: 100px;
  background: #aaa;
  border-radius: 0 50% 50% 0;
}

<div></div>