Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Make a rhombus image with border and padding

I would like to make an rhombus shaped image, with border and padding.
I’ve managed to make the image in a rhombus shape, but haven’t succeeded in making a border with padding around it.

I’m using elementor builder and looking for a solution that will not envolve js coding, only css. is there a way??

this is what I’m trying to achieve:1

Tags:

2

Answers


  1. 0

    You can use the clip-path property to set the border for your rhombus image.

    Here is the snippet link: 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;
}

    Parent Div:

    1. First, you have to wrap the image in a parent div
    2. That parent div will act as a border for our image
    3. Increase the parent div width and height slightly higher than image element’s width and height to resemble like a border

    Image tag:

    1. Update the image tag’s position to relative so that we can reposition the element

    2. Aligned the image center to the parent using left and top properties

    Can I use: https://caniuse.com/#search=clip-path

    Additional useful link:

    https://bennettfeely.com/clippy/

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

    Login or Signup to reply.
  2. 0

    Here is an idea with one element:

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search