Question 258261 in Html Question posted in
Some basic documentation can be found here.

Html – CSS: Double sided element not showing borders correctly

I am creating a rogue-like deck-builder game. I’m adding a feature to make a card that appears to be good, but works against you. However, since I need it to appear as different rarities on each side, that means I need two borders.

My original attempt was a standalone transition, but it was too sudden, and didn’t either fade into a color, or be double-sided like I wanted. My second attempt worked, but looked like this when built:

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;
}

.epic {
  border-top: 10px solid #9c20aa;
  border-bottom: 6px solid #9c20aa;
}

.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</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>

jsfiddle

Tags:

2

Answers


  1. 0 
            html, body {
            font-family: "Space Mono", monospace;
            color: white;
            width: 100%;
            height: 100%;
        }

        .card-container {
            display: flex;
        }

        .card {
            width: calc(70px * 2);
            height: calc(100px * 2);
            perspective: 600px;
            position: relative;
            transition: transform 1s;
            transform-style: preserve-3d;
            margin: 10px;
        }

        .cardfront,
        .cardback {
            backface-visibility: hidden;
            position: absolute;
            height: 100%;
            width: 100%;
            border-radius: 1em;
        }

        .evilcardfront {
            background: orange;
        }

        .evilcardback {
            background: maroon;
        }

        .epic {
            background: #9c20aa;
        }

        .flipped {
            transform: rotateY(180deg);
        }

        .cardback {
            transform: rotateY(180deg);
            font-size: medium;
            text-align: center;
            padding-top: 10px;
        }

        .common {
            background: slategray;
        }
        <div class="card-container">
        <div class="card 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</span>
            </div>
        </div>

        <div class="card 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>
        </div>
    </div>

    In this revised code, the following improvements have been applied:

    A .card-container section has been introduced to encapsulate your cards, enhancing the organizational structure.

    Moved the border-radius property to the .cardfront and .cardback classes, ensuring that the borders are rendered consistently on both sides.

    Background colors defined directly within card type classes (e.g., .evilcardfront, .evilcardback, .epic, .common) instead of relying on the border-top and border-bottom properties for border styling.

    These adjustments ensure that your double-sided cards now display the intended limit display, adjusted to the respective card type.

    Should I deserve a Clap from You?

    Login or Signup to reply.
  2. 0

    I think that this should solve your problem

    html,
body {
  font-family: "Space Mono", monospace;
  color: white;
  width: 100%;
  height: 100%;
}

.evil,
card {
  width: calc(70px * 2);
  height: calc(100px * 2);
  background: #3b3b3b;
  border-radius: 1em;
  perspective: 600px;
  position: relative;
  z-index: 1;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.evilBack {
  width: calc(70px * 2);
  height: calc(100px * 2);
  background: #3b3b3b;
  border-radius: 1em;
  perspective: 600px;
  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;
}

.epic {
  border-top: 10px solid #9c20aa;
  border-bottom: 6px solid #9c20aa;
}

.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;
}

.evil {
  border-top: 10px solid orange;
  border-bottom: 6px solid orange;
  transform-style: preserve-3d;
}

.evilBack {
  top: -0.65em;
  position: absolute;
  left: 0px;
  border-top: 10px solid maroon;
  border-bottom: 6px solid maroon;
}
    <div style="display: flex;">



  <div class='evil' onclick='if (!this.classList.contains("flipped")) { this.classList.add("flipped") }'>
    <div class="cardfront"></div>
    <div class='cardback'> <span class='evilBack'><span id='name'>Name</span><br><span id='type' style='color: fuchsia; font-size: small;'>type</span><br><span>this card is correct</span></span>
    </div>
  </div>





</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search