css Question posted in
Some basic documentation can be found here.

How to modify CSS to flip (mirror) a tick mark so it points in the correct direction?

I created a CSS tick mark for a success message, but it appears flipped in the wrong direction. I would like to mirror it to resemble a proper tick mark.

The tick mark is currently oriented in the wrong direction. Instead of resembling a proper tick mark (✓), it appears as if it’s flipped. Any suggestions on this with explanation to why this is happening.

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f0f8ff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  width: 100%;
}

h2 {
  color: #1F75FE;
  margin-bottom: 20px;
}

p {
  color: #333;
  margin-bottom: 20px;
}

a {
  color: #1F75FE;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

.tick {
  display: inline-block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #d4edda;
  color: #28a745;
  font-size: 40px;
  line-height: 70px;
  margin-bottom: 20px;
  position: relative;
  animation: scale 0.5s ease-in-out forwards;
}

.tick:before {
  content: '';
  position: absolute;
  top: 20px;
  left: 15px;
  width: 30px;
  height: 15px;
  border: solid #28a745;
  border-width: 0 5px 5px 0;
  transform: rotate(45deg);
  opacity: 0;
  animation: fadeIn 0.5s forwards 0.5s;
}

@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="container">
    <div class="tick"></div>
    <h2>Order Complete!</h2>
    <p>Your order is completed successfully</p>
  </div>
</body>

</html>
Tags:

2

Answers


  1. 0

    In your code, you give border width right and bottom sides so the right icon shows the as per mirror or fliped so only remove the right side border add border width for the left side and rotate your symbol to the proper direction. I think below I added the code to helpful you.

    body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f0f8ff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
}

h2 {
    color: #1F75FE;
    margin-bottom: 20px;
}

p {
    color: #333;
    margin-bottom: 20px;
}

a {
    color: #1F75FE;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

.tick {
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #d4edda;
    color: #28a745;
    font-size: 40px;
    line-height: 70px;
    margin-bottom: 20px;
    position: relative;
    animation: scale 0.5s ease-in-out forwards;
}

.tick:before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    width: 30px;
    height: 15px;
    border: solid #28a745;
    border-width: 0 0 5px 5px;
    transform: translateX(-50%) rotate(-45deg);
    opacity: 0;
    animation: fadeIn 0.5s forwards 0.5s;
}

@keyframes scale {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
    <div class="container">
    <div class="tick"></div>
    <h2>Order Complete!</h2>
    <p>Your order is completed successfully</p>
</div>
    Login or Signup to reply.
  2. 0

    Depending on your target browsers I would not draw a CSS tick like this.

    You would be better off using a clip-path polygon ( https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path )

    This gives you much finer grained control over the tick itself and how it animates.

    Something like…

    div {
  aspect-ratio: 1;
  background: green;
  clip-path: polygon(0 50%, 50% 60%, 95% 0, 100% 5%, 50% 70%, 0 60%);
  width: 50px;
}
    <div></div>

    This is very quick and rought but hopefully gives you enough to go on.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search