Нестандартные рамки у блока

как сделать такую рамку. при наведении на блок уголки должны съезжаться.

Ответ

Как вариант: https://jsfiddle.net/rm569err/
html:

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