как сделать такую рамку. при наведении на блок уголки должны съезжаться.
1 ответ
Как вариант: https://jsfiddle.net/rm569err/
html:
<div class="my_div"></div>
css:
.my_div {
position: relative;
background: blue;
height: 150px;
width: 300px;
}
.my_div:before {
display:block;
position: absolute;
left: 15px;
top: 0;
height: 150px;
width: 270px;
box-sizing: border-box;
border-bottom: 5px solid red;
border-top: 5px solid red;
content: " ";
transition: all 0.2s ease 0s;
}
.my_div:after {
display:block;
position: absolute;
left: 0;
top: 15px;
height: 120px;
width: 300px;
box-sizing: border-box;
border-left: 5px solid red;
border-right: 5px solid red;
content: " ";
transition: all 0.2s ease 0s;
}
.my_div:hover:before {
left: 0;
width: 300px;
}
.my_div:hover:after {
top: 0;
height: 150px;
}
-
-
@Olegatro, подозреваю, что вариантов решения даже не два) просто этот мне показался самым очевидным и svg, признаться честно, не очень люблю использовать– alenkins9 янв 2016 в 19:15