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

-3

我想像推杆一样在div上实现3D效果。我已经包含了图像并标记了我正在寻找的形状的区域。请引导我如何做到这一点。谢谢。如何像推杆一样获得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>

人谁使我的问题不是那么合理敬请提供答案，以及，我不需要半径实际上只是，我需要的是曲线的效果为好。

来源

2015-12-02 Aadil Afzal

考虑谷歌;也许搜索“对div的3d效果”。 – DwB

3d效果就像这个推杆曲线在最后，我只是想要我的div曲线，并给出了这种效果。到目前为止，我尝试我与半径，但它不起作用 –

@DwB我尝试但没有找到这种效果。 –

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

#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+ */ 
 
}

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

下一次请包括你已经在你的问题到目前为止已经试过。

来源

2015-12-02 16:53:09

但它不提供曲线效果 –

您能否详细说明一下？ –

我觉得OP想要一个3D效果 - http://jsfiddle.net/43oew4h4/1/只是添加一些阴影 – Adjit

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

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

<div></div>

来源

2015-12-02 16:54:31 Shomz

它没有提供像推杆那样的曲线效果，我需要那个，而不仅仅是半径。 –

你可以玩渐变，但看起来像这样的图像会非常困难。 – Shomz

我尝试了很多事情来获得这种效果，例如我尝试在那里得到一个阴影图像，但它不起作用。 –

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

回答

相关问题