制作一个带边框和填充的菱形图。

Question

我想做一个菱形的图片，有边框和padding.我已经成功的把图片做成了菱形，但是还没有成功的做一个边框和padding。

我在使用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.netnk8f5pyg4

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;
}

Parent Div:

1. 首先，你要把图片包在一个父div中。
2. 该父div将作为我们图像的边框。
3. 增加父div的宽度和高度，略高于图片元素的宽度和高度，类似于边框。

图像标签。

1. 更新图片标签的位置为相对位置，这样我们就可以重新定位元素了

2. 使用以下方法将图像中心对准父图像 left 和 top 属性

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

其他有用的链接。

https：/bennettfeely.comclippy。

https:/css-tricks.comclipping-masking-css。