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

Posted 2023-03-06

【中文标题】制作带有边框和填充的菱形图像

【英文标题】：Make a rhombus image with border and padding

【发布时间】：2020-08-22 10:34:09

【问题描述】：

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

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

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

【问题讨论】：

使用正方形并将其旋转 45 度...更简单

寻求代码帮助的问题必须包括最短的代码以便在问题本身中包含重现它所必需的最好是Stack Snippet。见How to create a Minimal, Reproducible Example

我没有代码，因为我正在使用 elementor 页面构建器。

Paulie_D，问题是，当我这样做时，容器会变形......

【参考方案1】：

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

这里是 sn-p 链接：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/

【讨论】：

我会试一试告诉你，谢谢你的帮助

我在这里看到的是，您向父 div 添加了背景颜色 .. 但我需要背景颜色是透明的并且有黑色边框。看我附上的图片。

添加一个div 到元素div.rhombus-parent 并为img 标记的祖父母div 应用黑色，并为父div 应用与主题背景颜色相同的颜色，它看起来像你所期望的。

你知道是否可以使用 elementor 做到这一点？

是的，在 elementor 主题中是可能的。只是一堆应用于 div 标签的 CSS。

【参考方案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>

【讨论】：

快到了！ bg图像不会旋转:(

@ברגבאי 你是什么意思？