Question

我想这样做

CSS Cylinders

如何使用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

Here是相同

的教程列表

您也可以使用jQuery插件构建一个

或者您可以尝试Google Chart Api

Answer 3

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

这只是为了好玩。在纯CSS3中，没有JS或图像。一种更好的方法可能是简单地使用其中一个图表库。

Answer 4

为舍入创建底部图像。为管道创建1px高图像为顶部创建一个小图像。

将您的图片划分为不同的div。

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

现在，您可以使用绝对定位和重复背景图像来设置此样式。我不认为浮动和所有这一切都很容易，因为你必须从下到上工作。

Answer 5

使用纯CSS执行此操作可能会有点过分。当然你可以使用渐变，但你不能只用css在圆柱底部获得那个阴影。我不知道如何使用css做气缸顶部。

最简单的方法是使用好的旧背景图像。

如果您根本不想要任何图片，可以考虑使用canvas。

UPD：如果您可以使用CSS3，则可能需要使用multiple background images。这样你只有一个<div>而不是三个。{{1}}。良好的语义。

Answer 6

看看http://icant.co.uk/csscharts/。它可以使用您自己的样式轻松定制，并且有一个方便的PHP脚本来生成表格。

Answer 7

嗯......可以用一些“蛮力”来完成。

首先，你应该切割cilinders的底座并将它们放在底部对齐的div的背景上。然后在另一个知道和固定高度的div中添加两个相同宽度的div，它们向左浮动并且在背景上，在Y轴上重复一个cilinder切片。然后根据需要控制它们的高度。在包含其他两个的div下方，您可以添加标题。现在你将拥有相同高度的cilinders。为了“缩短”一个你在其中创建另一个具有一定高度和白色背景（重复图像或颜色）的div。前{

<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 8

你可以通过给它一个方圆半径来制作带有CSS3的圆柱体。

例如：

box-radius: 100px / 30px;

这会给你一个椭圆形的盒子。

只要给它所需的宽度和高度，就完成了：）

或者使用 jqPlot 作为jquery插件。这个插件可以制作很多图表。

如何CSS两个垂直圆柱

8 个答案: