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>
2
Answers
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.
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…
This is very quick and rought but hopefully gives you enough to go on.