Question

我有 elementor pro 并且我想创建一些东西（也许是小部件？）来从正常的类别图像上传创建菱形类别图像。

我将如何开始？

请问大家有什么推荐的。它需要是一个小部件吗？我问的原因是我正在构建的网站将有许多类别和子类别，每次需要时在 photoshop 中创建图像都非常耗时。

现在图像是photoshop，钻石形状是在那里创建的

Answer 1

/* Getting a border */
selector .elementor-image {
    position: relative;
    background-color: black; /* Border Colour */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    
    /* Width and Height */
    width: 200px;
    padding-top: 200px;
}

/* Image */
selector .elementor-image img {
    position: absolute;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    /* Border */
    /* To change the border thickness, replace the 5px. */
    top: 5px;
    left: 5px;
    width: calc(100% - (5px * 2));
    height: calc(100% - (5px * 2));
}

将此应用于图像小部件、高级选项卡、自定义 CSS。

工作片段

/* Getting a border */

.elementor-image {
  position: relative;
  background-color: black;
  /* Border Colour */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  /* Width and Height */
  width: 200px;
  padding-top: 200px;
}


/* Image */

.elementor-image img {
  position: absolute;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  /* Border */
  /* To change the border thickness, replace the 5px. */
  top: 5px;
  left: 5px;
  width: calc(100% - (5px * 2));
  height: calc(100% - (5px * 2));
}

<div class="elementor-image">
  <img src="https://bennettfeely.com/clippy/pics/fierenze.jpg" />
</div>

您可以向元素添加自定义 CSS。您正在寻找的是 clip-path。

您可以使用 Clippy 来选择和自定义形状。

如果您需要有关自定义 CSS 的更多信息，请参阅 this Elementor Help page on Custom CSS。

不幸的是，设置 border 以获取边框不起作用，但有一个解决方法。见this question。

只有 Firefox 支持外部 SVG（例如 clip-path: url(wp-uploads/XXXX/XX/mysvg.svg);）您必须使用形状（例如 clip-path: polygon(XXX);）或文档中定义的剪辑路径元素（例如 clip-path: url(#clippathel);）。见'Can I Use.com'。

有关详细信息，请参阅this CSS Tricks article。

wordpress 开发查询

1 个答案: