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

#html #css #вёрстка #html5 #css3

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

Ответы

Ответ 1

Как вариант: 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;
}