【问题标题】：Overlapping stackable, clickable shapes with CSS and/ or JavaScript?使用 CSS 和/或 JavaScript 重叠可堆叠、可点击的形状？
【发布时间】：2016-01-08 17:36:28
【问题描述】：

这对我来说很难描述，所以请耐心等待。

我需要为网站构建“upvote”控件。 “upvotes”的数量可在系统设置中配置。控件应该看起来像向上的绿色 V 形。如果有 3 个，如果您单击顶部的一个，则您实际上已以 3 的权重“投票”。如果您随后单击底部的 V 形，您实际上将投票权重更改为 1。还有悬停、单击、以及与投票 V 形相关的主动样式。

线框图显示这些 V 形非常紧密地堆叠在一起，在我的 3 票示例中，底部 V 形的上点高于顶部 V 形的下点。

我认为，这让我无法使用图像，因为重叠将是一种难以管理的体验，我认为。所以我希望有一种相对简单的方法来使用 CSS 和/或 JavaScript“构建”这些形状并将它们视为标准 div。

我遇到麻烦了吗？或者有没有一种相对简单的方法可以兼容所有现代浏览器（IE 9+）？

【问题讨论】：

您的 OP 应该有屏幕截图或代码 sn-p 以查看预期输出
你试过用图标吗？这些可以以任何顺序重叠，这听起来就像您正在寻找的那样
用纯 CSS 创建一个 shevron 我在这里看到它也许会有所帮助：css-tricks.com/examples/ShapesOfCSS Shevron 位于页面底部
@SeanC，我认为图标的可点击区域仍然是一个块。
@estebanrincon 看起来很有希望，我试试看，谢谢！

标签： javascript html css drawing css-shapes

【解决方案1】：

这将使您开始前端。至少有一个从那里去的方向。通过一些 JS 和后端编程，您将能够使这些字体很棒的图标注册 1、2 或 3 的值

HTML

<div class="container">
    <div class="rating">
        <div class="upvote">
            <div><i class="fa fa-chevron-up"></i></div>
            <div><i class="fa fa-chevron-up"></i></div>
            <div><i class="fa fa-chevron-up"></i></div>
        </div>
        <span class="divider"></span>
        <div class="downvote">
            <div><i class="fa fa-chevron-down"></i></div>
            <div><i class="fa fa-chevron-down"></i></div>
            <div><i class="fa fa-chevron-down"></i></div>
        </div>
    </div>
</div>

CSS

.rating{
    margin-top:30px;
}
.rating > div {
  position: relative;
  width: 1.1em;
  margin:-10px auto;
}

.rating .fa{
    font-size:32px;
    line-height: 0;
}
.rating .divider{
    width:40px;
    display:block;
    border-bottom: 3px solid black;
    height:5px;
    text-align:center;
    margin: 15px 458px 25px;

}
.upvote > div .fa-chevron-up:hover,
.upvote > div:hover ~ div .fa-chevron-up {
   color: green;
}

.downvote > div .fa-chevron-down:hover,
.downvote > div:hover ~ div .fa-chevron-down {
   color: red;
}

附言您可能已经知道，CSS 不会遍历，因此您需要一些帮助来将悬停属性分配给 downvote 部分。如果明天没有其他人有这个答案，我会为你构建它。

这是DEMO

【讨论】：

这看起来很漂亮，但是 V 形符号根本没有重叠。你的例子能做到吗？
我敢打赌。可以涂鸦吗？
为我的演示重新加载页面。是这个意思吗？

【解决方案2】：

Svg 人字形

如果您使用 svg 创建此形状，则每个形状都有自己的边框。因此，悬停状态只会在其形状内触发。
对于点击，我为每个形状添加了 javascript 和 id。

var down1 = document.getElementById("down1");
var down2 = document.getElementById("down2");
var down3 = document.getElementById("down3");
var up1 = document.getElementById("up1");
var up2 = document.getElementById("up2");
var up3 = document.getElementById("up3");

function pling() {
  alert(this.id);
}

down1.addEventListener("click", pling);
down2.addEventListener("click", pling);
down3.addEventListener("click", pling);
up1.addEventListener("click", pling);
up2.addEventListener("click", pling);
up3.addEventListener("click", pling);

#center {
  fill: #222;
  stroke: #bbb;
  stroke-width: 0.5;
}
.up {
  fill: #5a5;
  cursor: pointer;
}
.up:hover {
  fill: #262;
  stroke: green;
  stroke-width: 0.1;
}
.down {
  fill: #322;
  cursor: pointer;
}
.down:hover {
  fill: #a55;
  stroke: red;
  stroke-width: 0.1;
}

<svg viewBox="0 0 50 100" width="100px" xmlns="http://www.w3.org/2000/svg">
  <polygon id="center" points="5,50 25,30 45,50, 25,70 5,50" />
  <polygon id="down3" class="down" points="5,70 25,90 45,70 45,80 25,100 5,80" />
  <polygon id="down2" class="down" points="45,60 25,80 5,60 5,70 25,90 45,70" />
  <polygon id="down1" class="down" points="5,50 25,70 45,50 45,60 25,80 5,60" />
  <polygon id="up1" class="up" points="5,50 25,30 45,50 45,40 25,20 5,40" />
  <polygon id="up2" class="up" points="5,40 25,20 45,40 45,30 25,10 5,30" />
  <polygon id="up3" class="up" points="5,30 25,10 45,30 45,20 25,0 5,20" />
</svg>

【讨论】：