使用 CSS 和/或 JavaScript 重叠可堆叠、可点击的形状？

Question

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

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

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

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

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

Answer 1

这就给你前端端开工了。至少有一个关于从那里去哪里的方向。通过一些 JS 和 back-end 编程，您将能够使那些字体很棒的图标注册 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;
}

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

这是DEMO

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

使用 CSS 和/或 JavaScript 重叠可堆叠、可点击的形状？

Overlapping stackable, clickable shapes with CSS and/ or JavaScript?

html

javascript

css

drawing

css-shapes

Svg 人字形