制作带边框和填充的菱形图像

Question

我想制作一个带有边框和填充的菱形图像。我设法将图像制作成菱形，但没有成功制作带填充的边框。

我正在使用 elementor builder 并寻找一个不涉及 js 编码的解决方案，只涉及 css。有办法吗？？

这就是我要实现的目标：1

Answer 1

您可以使用 clip-path 属性设置菱形图像的边框。

这是片段 link：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:

首先，您必须将图像包裹在父级 div
那个父 div 将充当我们图像的边框
增加父 div 宽度和高度，使其略高于图像元素的宽度和高度，使其类似于边框

图片标签：

将图像标签的位置更新为相对位置，以便我们可以重新定位元素
使用 left 和 top 属性将图像中心与父级对齐

我可以使用吗： https://caniuse.com/#search=clip-path

额外有用link:

https://bennettfeely.com/clippy/

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

Answer 2

这是一个只有一个元素的想法：

.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>

制作带边框和填充的菱形图像

Make a rhombus image with border and padding

css

wordpress

css-shapes

elementor