Php wordpress开发查询

我有elementor pro&我想创建一些东西（可能是小部件？）来从普通类别图像上传创建菱形类别图像

我该如何开始呢

有人有什么建议吗。它需要是一个小部件吗？ 我问的原因是，我正在建设的网站将有许多类别和子类别，它将是费时在photoshop中创建每次需要的图像

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

/*获取边界*/
选择器.elementor图像{
位置：相对位置；
背景色：黑色；/*边框颜色*/
剪辑路径：多边形（50%0%，100%50%，50%100%，0%50%）；
/*宽度和高度*/
宽度：200px；
填充顶部：200px；
}
/*形象*/
选择器。elementor图像img{
位置：绝对位置；
剪辑路径：多边形（50%0%，100%50%，50%100%，0%50%）；
/*边界*/
/*要更改边框厚度，请更换5px*/
顶部：5px；
左：5px；
宽度：计算值（100%-（5px*2））；
高度：计算（100%-（5px*2））；
}

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

工作片段

/*获取边框*/
.elementor图像{
位置：相对位置；
背景色：黑色；
/*边框颜色*/
剪辑路径：多边形（50%0%，100%50%，50%100%，0%50%）；
/*宽度和高度*/
宽度：200px；
填充顶部：200px；
}
/*形象*/
.elementor图像img{
位置：绝对位置；
剪辑路径：多边形（50%0%，100%50%，50%100%，0%50%）；
/*边界*/
/*要更改边框厚度，请更换5px*/
顶部：5px；
左：5px；
宽度：计算值（100%-（5px*2））；
高度：计算（100%-（5px*2））；
}

谢谢。你看到我的截图了吗？我可以在钻石周围画一个边框吗？我已经更新了答案。如果您觉得我的答案有用，请将其标记为已接受的答案。谢谢！我已经接受了。我用了两个多边形，但现在我有另一个问题。我将把它作为一个新问题发布。你能告诉我，为了给每个边框涂上不同的颜色，我应该把第n个子选择器放在哪里吗？我使用的主题有4种颜色，我想全部使用。我已经试过了，它似乎给它们涂上了相同的颜色一个指向堆栈交换问题的链接：