How to apply gradient border on an irregular shape using a pseudo element?

edit

To apply a gradient border on an irregular shape using a pseudo-element, follow these steps:

1. Create your HTML structure with the irregular shape as the parent element. For example:

<div class="irregular-shape">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

1. Style the parent element with the desired position and dimensions, as well as any other styling you wish to apply.

.irregular-shape {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #ccc;
}

1. Create a pseudo-element for the parent element using the ::before or ::after selector. This will serve as the container for the gradient border.

.irregular-shape::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

1. Apply the gradient border to the pseudo-element. You can do this using linear-gradient or radial-gradient, depending on the effect you want to achieve. Make sure to use the same dimensions as the parent element.

.irregular-shape::before {
  background: linear-gradient(to right, #f00, #00f);
}

/* or */

.irregular-shape::before {
  background: radial-gradient(circle at center, #f00, #00f);
}

1. Adjust the positioning of the pseudo-element to fit around the irregular shape. This may involve some trial and error to get right, depending on the shape and dimensions of your parent element.

.irregular-shape::before {
  transform: skew(30deg);
  transform-origin: bottom;
}

1. Save and refresh your browser to view the gradient border on the irregular shape.

Here's the complete CSS example:

.irregular-shape {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #ccc;
}
.irregular-shape::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(to right, #f00, #00f);
  transform: skew(30deg);
  transform-origin: bottom;
}