I don't really know how to explain what I mean, but here's a photo so you can see:
The part in the circle is not really as smooth as I'd like. I have a multiple monitor setup and on another monitor the not-smoothness is really annoying. Is there any way to make it look better?
#dashboard-content {
margin-top: 10vh;
position: relative;
transition-duration: 500ms;
z-index: 1;
border-radius: 15px;
box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
}
.avatar-wrapper {
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
border-radius: 15px 15px 0 0;
box-sizing: border-box;
padding: 30px 30px 0 30px;
background-color: #3f43fd;
overflow: hidden;
}
.avatar-wrapper::after {
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
position: absolute;
width: 150%;
height: 80px;
bottom: -45px;
left: -25%;
content: "";
background-color: #ffffff;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.dashboard-avatar {
display: block;
margin: 0 auto;
width: 20%;
}
.dashboard-data {
display: flex;
flex-direction: column;
align-items: flex-end;
row-gap: 7.5px;
margin-right: 1rem;
}
.dashboard-name {
position: relative;
font-weight: bold;
}
.dashboard-email {
font-weight: 100;
color: gray;
}
.dashboard-line {
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
margin: 0.2rem auto 0 auto;
width: 50px;
height: 3px;
background-color: #3f43fd;
content: "";
}
.fa-diamond-custom {
color: #b9f2ff;
}<div id="dashboard-content">
<div class="avatar-wrapper"><img class="dashboard-avatar" src="https://pluspng.com/img-png/png-user-icon-circled-user-icon-2240.png" alt="test"></div>
<div class="dashboard-data">
<div class="dashboard-name">Octavian Niculescu<div class="dashboard-line"></div>
</div>
<div class="dashboard-email">octavian.niculescu@test.com</div>
<div class="dashboard-diamonds">100<i class="fa fa-diamond fa-diamond-custom" aria-hidden="true"></i></div>
</div>
</div>I suspect there might be some anti-aliasing setting that might help with this, but I couldn't find any.
So, what would be the best way to make that line as smooth as possible?
Thanks.