CODEWITHSUNDEEP
htmlcssborder
Cláudio Barreira
Cláudio Barreira

Reputation: 459

Rotate border - bad quality

I have a circle element with half a border, when its hovered the border animate to cover the whole circle.

My problem is that the border appears with bad quality, pixelated. Any way to get around this?

JSFIDDLE

I did this all with CSS, using the following code:

.circle {
    border-radius: 50%;
    position: relative;
    -webkit-box-shadow: 3px 2px 5px 0px rgba(50, 50, 50, 0.69);
    -moz-box-shadow:    3px 2px 5px 0px rgba(50, 50, 50, 0.69);
    box-shadow:         3px 2px 5px 0px rgba(50, 50, 50, 0.69);
    height: 180px;
    width: 180px;
    margin: 9px auto;
    cursor: pointer;
}

.arc_q {
    position: absolute;
    top: -7px;
    left: -7px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border-width: 7px;
    border-style: solid;
    border-image: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);

}

.arc_q_2 {
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);

}
.arc_q_3 {
    -webkit-transition: all 400ms;
    -moz-transition: all 400ms;
    transition: all 400ms;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.arc_q_4 {
    -webkit-transition: all 400ms;
    -moz-transition: all 400ms;
    transition: all 400ms;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
}


.circle:hover .arc_q_3 {
    -webkit-transform: rotate(-225deg);
    -moz-transform: rotate(-225deg);
    transform: rotate(-225deg);


}
.circle:hover .arc_q_4 {
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);

}

#circle_1 .arc_q {
    border-color: #e01f25 transparent transparent transparent;
}

#circle_1 .circle {
    background-image: url('images/adegamae_logo.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    background-size: 80px;
}

Upvotes: 0

Views: 205

Answers (1)

Anthony Hilyard
Anthony Hilyard

Reputation: 1240

AlexG's fiddle can be further simplified by making each div take up half the circle, requiring only two arc divs plus one to hide elements. Consider using: 

border-color: #e01f25 transparent transparent #e01f25;

instead of 

border-color: #e01f25 transparent transparent transparent;

See the follow fiddle for an example: https://jsfiddle.net/38d47ag0/

It may also be noted that I am only transitioning the transform property, since that is the only one that is changing.

Upvotes: 1

Related Questions