Подвинуть border относительно картинки

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

Хочу сделать так. Понятно, что чтобы выдвинуть на передний план, нужно добавить z-index.
Но как сделать подобный border относительно изображения?
    

Ответы

Ответ 1

Решение через border и использование div:



.image {
  position: relative;
  width: 150px;
  height: 150px;
  background-image: url("https://graph.facebook.com/625308780945294/picture?type=large");
}

.image:before {
  content: "";
  position: absolute;
  border: 2px solid #c745bc;
  left: 20%;
  top: 20%;
  width: 100%;
  height: 100%;
  z-index: -1;
}




Ответ 2

Можно сделать с помощью тени, но этот способ сработает, если только на фоне сплошной
цвет:



img {
  width: 150px;
  height: 150px;
  box-shadow: 16px 16px 0px #fff, 18px 18px 0px #c745bc, 18px 14px 0px #c745bc, 14px
18px 0px #c745bc;
}



Ответ 3

transform: translate():



div {
  position: relative;
  padding: 10px;
  display: inline-block;
  margin: 20px;
  background: #eee;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid red;
  transform: translate(15px, -15px);
  z-index: -1;
}



Ответ 4

как вариант - размести изображение в div установи border у div`а и смести img относительно
div через position или transform

https://jsfiddle.net/1fve7q00/



div {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  position: relative;
}

img {
  width: 100px;
  height: 100px;
  position: absolute;
  left: -10px;
  top: 10px;
}