html - 如何CSS两个垂直圆柱体

Question

我想做这个

如何使用 CSS 实现这些？

更新

如何在同一底部对齐圆柱体，以及如何在它们下方添加标题？

Answer 1

您必须将圆柱体图像分成三部分:顶部、中间(将重复)和底部。像这样:

例如，将它们命名为 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。