构建一个＆＃34; 3D＆＃34;使用HTML，CSS和JS构建

Question

这个问题是广泛的，我知道，但无论如何......

如何使用HTML，CSS和JS（可能是图像）获得与下图相同的结果？ “级别”的数量是不可预测的，建筑物的每个“级别”都必须是可点击的，<a href="#"></a>或类似的东西。

这可能吗？

Answer 1

我用css转换构建了一些东西。不完美，但我想你会明白这一点。它使用屋顶和侧面元素的变换，并通过伪类添加边元素。

#stack {
  padding: 10px;
}

.roof {
    width: 100px;
    height: 20px;
    background: #aff;
    transform: translateX(10px) skewX(135deg);
    padding-top: -20px;
}
.level {
    text-align: center;
    width: 100px;
    height: 20px;
    background: #99f;
    margin: 1px;
}

.level:after {
    display: block;
    width: 20px;
    height: 20px;
    background: #00f;
    content: "";
    margin-left: 100px;
    transform: translateY(-30px) skewY(135deg);
}

.level:hover {
    background: #f99;
}

.level:hover:after {
    background: #f00;
}

<div id="stack">
    <div class="roof"></div>
    <div class="level">1</div>
    <div class="level">2</div>
    <div class="level">3</div>
    <div class="level">4</div>
</div>

随意使用关卡内的链接。

修改：添加:hover突出显示

Answer 2

你必须使用css转换和伪元素。 只是一个快速而肮脏的例子：

＆＃13;

＆＃13;

a {
    display:block;
    width:100px;
    background:blue;
    height: 30px;
    line-height:30px;
    color: #fff;
    text-align:center;
    margin-bottom:2px;
    position:relative;
}

a:after {
    position:absolute;
    content:"";
    background:darkRed;
    height: 20px;
    width: 42px;
    right: -36px;
    top:-2px;
    transform: skew(-45deg) rotate(45deg);
}

div {
    padding:100px;
}

＆＃13;

<div>
    <a href="#">one</a>
    <a href="#">two</a>
    <a href="#">three</a>
    <a href="#">four</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

是的，有可能

您可以使用画布或 SVG