如何像推杆一樣獲得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效果？

回答

相關問題