3

как сделать такую рамку

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

1 ответ 1

8

Как вариант: 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;
}
2
  • Так же можно через svg
    – olegatro
    9 янв 2016 в 2:05
  • @Olegatro, подозреваю, что вариантов решения даже не два) просто этот мне показался самым очевидным и svg, признаться честно, не очень люблю использовать
    – alenkins
    9 янв 2016 в 19:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.