Question

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

我正在使用elementor生成器，并在寻找一种解决方案，该解决方案仅涉及CSS，而不会涉及js编码。有办法吗？

这是我要实现的目标：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;
}

父分区：

首先，您必须将图像包装在父div中
该父div将作为我们图片的边框
增加父div的宽度和高度，使其略高于图像元素的宽度和高度，类似于边框

图片标签：

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

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

其他有用的链接：

https://bennettfeely.com/clippy/

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

用边框和填充物制作菱形图像

2 个答案: