Can I create interactive stacked shapes with CSS and/or JavaScript?

Question

Can I create interactive stacked shapes with CSS and/or JavaScript?

Trying to explain this may be a challenge, so please bear with me.

I need to create an "upvote" feature for a website. The number of upvotes is adjustable in the system settings. The upvote controls should resemble green chevrons pointing upwards. For example, if there are three chevrons, clicking on the top one signifies a vote worth 3, while clicking on the bottom one changes the vote weight to 1. These chevrons also require hover, click, and active styles.

The wireframes depict the chevrons being very close together, almost overlapping, like in my scenario where the bottom point of the upper chevron is higher than the top point of the lower chevron.

This means using images might not work well due to potential overlap issues. So, I am looking for a simple way to create these shapes using CSS and/or JavaScript as standard div elements.

Am I facing difficulty? Or is there a straightforward solution that works across all modern browsers (including IE 9+)?

javascript html css drawing css-shapes

Answer 1

Answer №1

To kickstart the front-end development process, you can follow this guide for some initial direction. By incorporating JavaScript and back-end programming, you'll be able to customize those font awesome icons to represent values of 1, 2, or 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. Keep in mind that CSS does not traverse, so you may need assistance to assign hover attributes to the downvote section. If no one else addresses this issue, I will create a solution for you by tomorrow.

Check out the DEMO

Answer 2

To kickstart the front-end development process, you can follow this guide for some initial direction. By incorporating JavaScript and back-end programming, you'll be able to customize those font awesome icons to represent values of 1, 2, or 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. Keep in mind that CSS does not traverse, so you may need assistance to assign hover attributes to the downvote section. If no one else addresses this issue, I will create a solution for you by tomorrow.

Check out the DEMO

Answer 3

Answer №2

Creative Svg Design

When using svg to create unique shapes, each shape comes with its own borders. This means that hover effects will only affect elements within the specific shape. For interactive purposes like click events, JavaScript and IDs are essential to target each individual shape.

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 onClickAlert() {
  alert(this.id);
}

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

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

Answer 4

Creative Svg Design

When using svg to create unique shapes, each shape comes with its own borders. This means that hover effects will only affect elements within the specific shape. For interactive purposes like click events, JavaScript and IDs are essential to target each individual shape.

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 onClickAlert() {
  alert(this.id);
}

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

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

Can I create interactive stacked shapes with CSS and/or JavaScript?

Answer №1

Answer №2

Creative Svg Design

Similar questions

Determine the variance between the final two items in an array composed of objects

Using `overflow: hidden` on a table will result in the bottom and right borders disappearing

React | Utilizing ForwardedRefs with React Components

Issue with BrowserRouter, improperly looping through the array using map

When using the transition mode "out-in" in Vue, the returned ref element may be undefined

Creating seamless scrolling in ReactJS without any pre-built components

Setting the height of a div based on its own width: A step-by-step guide

My divs seem to overlap in strange, unpredictable ways depending on the zoom level - it's an odd phenomenon that occurs

Strategies for adjusting text size to fit within a resizable div container

AWS Lambda applies quotes to create the event input

Issues with utilizing React Router and Hooks

Trying to assign a value to the property 'male' of an undefined object - error encountered while setting object value from an array

What could be causing certain javascript functions to not work properly?

Ensuring a Fixed Delta Tooltip in lightweight-charts is essential for maintaining a seamless

Utilize mouseover to rotate the camera in three.js

ng-class expressions are constantly evolving and adapting

Leveraging JavaScript and HTML to extract a single data point from a JSON response

Changed over to a promise-oriented database, causing my login feature to malfunction completely

Conceal form upon submission with jQuery

Issue with the selected toggle menu