如何为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或图像。更好的方法可能是简单地使用其中的一个图表库。