Сделайте изображение ромба с рамкой и отступом - PullRequest
Новая
       38

Сделайте изображение ромба с рамкой и отступом

1 голос
/ 07 мая 2020

Я хочу создать изображение в форме ромба с рамкой и отступом. Мне удалось сделать изображение в форме ромба, но не удалось создать границу с отступом вокруг него.

Я использую конструктор elementor и ищу решение, которое не будет окружать js кодировка, только css. есть ли способ ??

вот чего я пытаюсь достичь: 1

Ответы [ 2 ]

1 голос
/ 07 мая 2020

Вот идея с одним элементом: 

.box {
  width: 150px;
  height: 150px;
  margin: 60px;
  /* this is your border*/
  outline: 2px solid;
  outline-offset: 15px;
  /**/
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
}

.box::before {
  content: "";
  display: block;
  width: 141%;
  height: 141%;
  flex-shrink:0;
  background: center/cover;
  background-image: inherit;
  transform: rotate(-45deg);
}

body {
  background: yellow;
}
<div class="box" style="background-image:url(https://i.picsum.photos/id/1003/800/800.jpg)"></div>

<div class="box" style="background-image:url(https://i.picsum.photos/id/1074/800/800.jpg)"></div>
0 голосов
/ 07 мая 2020

Вы можете использовать свойство clip-path, чтобы установить границу для вашего изображения ромба.

Вот ссылка на фрагмент: https://jsfiddle.net/nk8f5pyg/4/

HTML : 

<div class="rhombus-parent">
  <img src="https://picsum.photos/id/237/200/300" class="rhombus">
</div>

CSS: 

.rhombus{
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  position: relative;
  width: 300px;
  height: 200px;
  left: 10px;
  top: 10px;
}

.rhombus-parent {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: red;
  width: 320px;
  height: 220px;
}

Родительский Div:

  1. Сначала вам нужно обернуть изображение в родительский div
  2. Этот родительский div будет действовать как граница для нашего изображения
  3. Увеличить ширину и высоту родительского div немного выше ширины и высоты элемента изображения, чтобы он выглядел как граница

Тег изображения:

  1. Обновить положение тега изображения на относительное, чтобы мы могли изменить положение элемента

  2. Выровнял центр изображения по родительскому объекту с помощью свойств left и top

Могу ли я использовать: https://caniuse.com/#search = clip-path

Дополнительная полезная ссылка:

https://bennettfeely.com/clippy/

https://css-tricks.com/clipping-masking-css/

...