如何爲CSS兩個垂直缸

Question

我想這樣做

如何用CSS做這些？

更新

如何排列在同一底缸，以及如何添加它們下面的標題嗎？

Answer 1

您必須將圓柱體圖像分爲三部分：頂部，中部（將重複）和底部。像這樣：
http://img218.imageshack.us/img218/8668/tlchargement.png

例如，給他們打電話top.png，middle.png和bottom.png。

然後，你需要三個HTML元素，每一個部分：

<div class="cylinder top"></div> 
<div class="cylinder middle" style="height:300px"></div> 
<div class="cylinder bottom"></div> 

而CSS：

.cylinder { 
    width: <width of the cylinder image>px; 
} 
.cylinder.top { 
    background-image:url('top.png') no-repeat; 
    height: <height of the top image>px; 
} 
.cylinder.middle { 
    background-image:url('middle.png') repeat-y; /* repeat vertically */ 
} 
.cylinder.bottom { 
    background-image:url('bottom.png') no-repeat; 
    height: <height of the bottom image>px; 
} 

要改變高度或缸，你只需要在修改the style="height:300px"中間元素。

此解決方案可以在任何瀏覽器中工作，甚至IE6。

Answer 2

創建舍入的底部圖像。 爲管道創建1px高的圖像 爲頂部創建一個小圖像。

將你的圖片分成不同的div。

<div> 
    <div class="bar1"> 
     <div class="bottom"></div> 
     <div class="middle"></div> 
     <div class="top"></div> 
    </div> 
</div> 

現在，您可以使用絕對定位和重複背景圖像來設計風格。我不認爲用浮動和全部都很容易，因爲你必須從下到上工作。

Answer 3

用純CSS做這個可能會矯枉過正。當然，你可以使用漸變，但你不能用css只在圓柱體底部得到陰影。我不知道如何用css做圓柱體。

最簡單的方法是使用好的舊背景圖像。

如果您根本不需要任何圖像，則可以考慮使用canvas。

UPD：如果你可以使用CSS3，你可能想使用multiple background images。這樣，你將只有一個<div>而不是其中三個。良好的語義。

Answer 4

Here是相同

您可以使用jQuery插件以及

建立一個或者你可以嘗試Google Chart Api

Answer 5

在http://icant.co.uk/csscharts/看看教程的列表。它可以用你自己的風格輕鬆定製，並且有一個方便的PHP腳本來生成表格。

Answer 6

那麼......它可以用一些「蠻力」來完成。

首先，你應該削減cilinders的基礎，並把它們放在底部對齊的div背景上。 然後在另一個知道和固定高度的div添加兩個相同寬度的div，它們左側浮動並且在背景上，在Y軸上重複一片cilinder。然後根據需要控制它們的高度。在包含其他兩個div的下面，您可以添加標題。 現在你將有相同高度的cilinders。爲了「縮短」你在裏面創建另一個具有一定高度和白色背景（重複圖像或顏色）的div。 ex {

<div id="chart"> <!-- this one has the bottom cut backgound --> 

    <div style="height:200px"> 

     <!-- cilinder class has the background --> 
     <div class="clinder" style="height:100%">&nbsp;</div> 

     <div class="clinder" style="height:100%"> 

       <!-- this one has white bg --> 
       <div class="shorter" style="height:30px">&nbsp;</div> 

     <div> 
    </div> 
    <div class="labels"> 
    <div class="caption"> 
     Indoor 
    </div> 
    <div class="caption"> 
     Outdoor 
    </div> 
    </div> 
</div> 

它應該這樣工作。

Answer 7

你可以通過給它一個盒子半徑來製作帶有CSS3的圓柱體。

例如：

box-radius: 100px/30px; 

這會給你一個箱子一個橢圓形的外觀。

只要給它所需的寬度和高度，它的完成:)

或者使用jqPlot作爲一個jQuery插件。這個插件可以製作很多圖表。

Answer 8

http://codepen.io/msvbg/pen/Lymko

這只是爲了好玩。在純粹的CSS3中，沒有JS或圖像。更好的方法可能是簡單地使用其中的一個圖表庫。