2

Нужен такой крестик, вставлять картинкой не хочу, ибо нужно чтобы менялся цвет при наведении. Понимаю, что нужно делать через бордер, но не пойму как сделать пересекающиеся линии. введите сюда описание изображения

2 ответа 2

4

.close{
  position: absolute; top: 50%; left: 50%;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  margin: -25px 0 0 -25px;
}
.close:before,
.close:after{
  content: '';
  position: absolute; top: 0;
  width: 2px;
  height: 100%;
}
.close:before{
  left: calc(50% - 1px);  
  border-left: 2px dotted #00f;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.close:after{
  right: calc(50% - 1px); 
  border-right: 2px dotted #00f;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.close:hover:before,
.close:hover:after{
  border-color: #f00;
}
<a href="#" class="close"></a>

4
<a href="#" class="close">

.close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}

.close:hover {
  opacity: 1;
}

.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
 transform: rotate(-45deg);
}

тест online: https://codepen.io/brissmyr/pen/egidw

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.