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

Question

我想制作一个带有边框和填充的菱形图像。我已经设法将图像制作成菱形形状，但还没有成功地在其周围制作带有填充的边框。

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

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

Answer 1

这是一个包含一个元素的想法：

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

Answer 2

您可以使用该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;
}

父级：

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/