My goal was to create a card game with multicolored, double-sided borders, but I encountered issues when trying to implement this feature. Initially, I attempted to use an onclick event to change the border color, but it didn't work as expected.
I first tried a standalone transition, which turned out to be too sudden and lacked the desired fade effect or double-sided appearance. My second attempt produced some results, but the final output looked like this:
html,
body {
font-family: "Space Mono", monospace;
color: white;
width: 100%;
height: 100%;
}
card {
width: calc(70px * 2);
height: calc(100px * 2);
background: #3b3b3b;
border-radius: 1em;
perspective: 600px;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.cardfront,
.cardback {
backface-visibility: hidden;
position: absolute;
height: 100%;
width: 100%;
}
.evilcardfront {
border-top: 10px solid orange;
border-bottom: 6px solid orange;
}
.evilcardback {
border-top: 10px solid maroon;
border-bottom: 6px solid maroon;
}
.flipped {
transform: rotateY(180deg);
}
.cardback {
transform: rotateY(180deg);
font-size: medium;
text-align: center;
padding-top: 10px;
}
.common {
border-top: 10px solid slategray;
border-bottom: 6px solid slategray;
}<div style="display: flex;">
<card class='evil' onclick='if (!this.classList.contains("flipped")) { this.classList.add("flipped") }'>
<div class='cardfront evilcardfront'></div>
<div class='cardback evilcardback'><span id='name'>Name</span><br><span id='type' style='color: fuchsia; font-size: small;'>type</span><br><span>this card has misplaced borders with a gap between them</span></div>
</card>
<card class='common' onclick='if (!this.classList.contains("flipped")) { this.classList.add("flipped") }'>
<div class='cardfront'></div>
<div class='cardback'><span id='name'>Name</span><br><span id='type' style='color: fuchsia; font-size: small;'>type</span><br><span>this card is correct</span></div>
</card>
</div>I'm struggling to identify the cause of the gap issue. The background of the element doesn't fill the full height, the border-radius is distorted, and the bottom border shifts downward upon flipping.