Нужен такой крестик, вставлять картинкой не хочу, ибо нужно чтобы менялся цвет при наведении. Понимаю, что нужно делать через бордер, но не пойму как сделать пересекающиеся линии.
2 ответа
.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>
<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