Как я могу сократить границу справа и снизу?
Необходимое состояние: граница сверху и слева должна быть помещена в верхний левый угол изображения (максимум 50% ширины или высоты), а граница снизу и справа также должна быть помещена в нижний правый угол изображения (максимум 50% ширины или высоты).
Действие: при наведении курсора мыши на изображение
Структура HTML:
<div class="col-lg-4 col-md-4 col-sm-12 portfolio-img-wrap">
<img src="images/portfolio/5.jpg" class="img-fluid">
<div class="portfolio-topleft"></div><div class="portfolio-bottomright"></div>
</div>
CSS-строки:
.portfolio .portfolio-topleft:before {
border-top: 2px solid #757575;
width: 60%;
}
.portfolio .portfolio-topleft:after {
border-left: 2px solid #757575;
height: 45%;
}
.portfolio .portfolio-bottomright:before {
border-bottom: 2px solid #757575;
}
.portfolio .portfolio-bottomright:after {
border-right: 2px solid #757575;
}
::есть и другие позиционирующие css, но это не проблема, поэтому я просто оставлю ее::
Проблема: как вы можете видеть, придание ширины и высоты границе сверху и слева работало хорошо, как и хотелось, но когда то же самое сделали с границей снизу, она была помещена только слева (например, ширина 50%), а граница справа-в верхнем углу (например, высота 50%)
Необходимое Решение:
Как я могу сделать так, чтобы border-bottom оставался в правом углу, когда он имеет только ширину:50% и border-right внизу... так что они встречаются в нижнем правом углу (против двух других @ верхний левый)
Что я уже пробовал:
Проблема: как вы можете видеть, придание ширины и высоты границе сверху и слева работало хорошо, как и хотелось, но когда то же самое сделали с границей снизу, она была помещена только слева (например, ширина 50%), а граница справа-в верхнем углу (например, высота 50%)