wordpress development query

Question

I have elementor pro & i want to create something ( widget maybe ? ) to create Diamond shaped category images from the normal category image upload.

how would i begin this?

has anybody any recommendations please. would it need to be a widget? reason i am asking is the site i am building will have many categories and subcategories and it will be time consuming to create the images in photoshop every time it is required.

right now the images are photoshop and the diamond shape was created there

enter image description here

score 1 · Accepted Answer · edited Feb 05 '21 at 13:56

/* 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));
}

Apply this to the Image widget, Advanced tab, Custom CSS.

Working snippet

/* 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>

You can add custom CSS to the elements. What you're looking for is clip-path.

You can use Clippy to choose and customise the shape.

If you need more information on Custom CSS, see this Elementor Help page on Custom CSS.

Unfortunately, setting border to get a border won't work, but there is a workaround. See this question.

Only Firefox supports external SVGs (e.g. clip-path: url(wp-uploads/XXXX/XX/mysvg.svg);) You must use shapes (e.g. clip-path: polygon(XXX);) or Clip Path elements defined in your document (e.g. clip-path: url(#clippathel);). See 'Can I Use.com'.

For more info, see this CSS Tricks article.

thank you. did you see my screenshot, can i have a border around the diamond too? — challenge2022, Feb 05 '21 at 10:28
I've updated my answer. If you find my answer useful, please mark it as the accepted answer. — Maytha8, Feb 05 '21 at 12:23
thank you! I have accepted. I got it working with two polygons, but now i have another problem. i will post it as a new question. — challenge2022, Feb 05 '21 at 15:31
could you tell me where i should put the nth child selector in order to colour each border a different colour? the theme im using has 4 colours and want to use them all. i have tried it and it seems to colour them all the same colour — challenge2022, Feb 05 '21 at 17:40
a link to the question on stack exchange: https://wordpress.stackexchange.com/questions/382864/nth-child-selector-no-matter-where-i-put-it-in-this-it-turns-all-borders-green — challenge2022, Feb 05 '21 at 17:46

wordpress development query

1 Answers1