Border css на половину круга

#html #css

Ребят,как сделать чтобы было из этого:

Получить при наведении это:

Не переворачивая объект типа:transform: rotate(45deg);
    

Ответы

Ответ 1

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  background: #333;
}
.circle-out {
  width: 98px;
  height: 98px;
  left: 1px;
  top: 1px;
  border-radius: 50%;
  position: absolute;
  background: #fff;
}
.circle:hover {
  background: linear-gradient(to top, #333 0%, #333 49%, #f33 50%, #f33 100%);
}

  




Ответ 2

Код чуть больше, но зато нет проблем с прозрачностью фона:



* { margin: 0; box-sizing: border-box; padding: 0; }
body { background: linear-gradient(rgba(255,255,255, 0) .9em, rgba(0, 0, 0, .15)
1em) 0 0, linear-gradient(90deg, rgba(255,255,255, 0) .9em, rgba(0, 0, 0, .15) 1em)
0 0; background-size: 1em 1em; background-color: #fafaff; }

.circle {
  position: relative;
  margin: 30px auto;
  width: 100px;
  height: 100px;
  border: 4px solid #fa0;
  border-radius: 50%;
  background: rgba(127, 127, 127, 0.5);
}
.circle:after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 1;
  height: 50%;
  width: 100%;
  border: 4px solid rgba(255, 0, 0, 0.0);
  border-radius: 50px 50px 0 0;
  border-bottom: none;
  background: transparent;
  transition: border 0.3s ease-in-out;
}
.circle:hover:after {
  border: 4px solid rgba(255, 0, 0, 1.0);
  border-bottom: none;
}