Ask Your Question

Revision history [back]

click to hide/show revision 1
initial version

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;
}