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

184

27 мая 2019, 20:50

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

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

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

Answer 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%); 
}

<div class="circle"> 
  <div class="circle-out"></div> 
</div>

Answer 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; 
}