Issue with linear gradient not functioning in :before pseudo element

Question

Issue with linear gradient not functioning in :before pseudo element

Does anyone know how to create a triangle cut effect on a div without the background being rendered as a rectangle?

body {
  background: #333;
}

.parent {
  height: 200px;
  background: yellow;
  position: relative;
  overflow: hidden;
  display: block;
}

.parent:before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(190deg, transparent 20%, #FFFFFF 20.2%), linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 100%);
  z-index: 2;
}

<div class="parent"></div>

I am aiming for a design like this:

https://i.sstatic.net/jJe8Q.png

The goal is not to 'cut' the .parent div itself but to have the cut effect on another div that sits on top of it. The triangle cut will be white with transparency around it to reveal what's inside the .parent div.

Based on the image provided, here is the breakdown:

The yellow div represents .parent.
The white triangle corresponds to .slant.

html css pseudo-element

Answer 1

Answer №1

Looks like your background is functioning correctly. Try adjusting the color scheme and see how it looks.

Here's a similar example to help guide you:

background: linear-gradient(120deg, transparent 10%, #333333 10.2%), linear-gradient(45deg, #ff9900 0%, #00cc66 100%);

Answer 2

Looks like your background is functioning correctly. Try adjusting the color scheme and see how it looks.

Here's a similar example to help guide you:

background: linear-gradient(120deg, transparent 10%, #333333 10.2%), linear-gradient(45deg, #ff9900 0%, #00cc66 100%);

Answer 3

Answer №2

If you want to modify your code without using pseudo elements, you can try the following approach:

body {
  background: #333;
}

.parent {
  height: 200px;
  background: 
    linear-gradient(yellow,yellow)                               top   /100% 30%,
    linear-gradient(to bottom left,yellow 50%,transparent 50.5%) bottom/100% 70%;
  background-repeat:no-repeat;
}

<div class="parent"></div>

Updated Version

body {
  background: #333;
}

.parent {
  height: 200px;
  background: yellow;
  position:relative;
}

.parent:before {
  content:"";
  position:absolute;
  top:30%;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to bottom left,transparent 50%,#fff 50.5%);
}

<div class="parent"></div>

Answer 4

If you want to modify your code without using pseudo elements, you can try the following approach:

body {
  background: #333;
}

.parent {
  height: 200px;
  background: 
    linear-gradient(yellow,yellow)                               top   /100% 30%,
    linear-gradient(to bottom left,yellow 50%,transparent 50.5%) bottom/100% 70%;
  background-repeat:no-repeat;
}

<div class="parent"></div>

Updated Version

body {
  background: #333;
}

.parent {
  height: 200px;
  background: yellow;
  position:relative;
}

.parent:before {
  content:"";
  position:absolute;
  top:30%;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to bottom left,transparent 50%,#fff 50.5%);
}

<div class="parent"></div>

Answer 5

Answer №3

To create interesting effects, you can utilize the clip-path property in your div elements.

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);

By using the clip path property, you can clip your elements into various shapes. The polygon method offers precise control to define linear paths along the element. By specifying the vertices of the polygon, you can create intricate shapes with clockwise precision.

For assistance in creating shapes through code, visit

In this example, the coordinates provided correspond to x = 0, y = 0 (top left corner), the rightmost corner, the bottom right corner, and the midpoint of the left edge at 50%.

The clip path will eliminate any background outside of this defined shape.

Keep in mind that while the div itself remains a rectangular block, its content may overflow if height and padding are not managed correctly.

body {
  background: #333;
}

.parent {
  height: 200px;
  background: yellow;
  position: relative;
  overflow: hidden;
  display: block;
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
}

.parent-white {
  height: 200px;
  background: white;
}

<div class="parent-white">
  <div class="parent">
  
  </div>
</div>

Answer 6

To create interesting effects, you can utilize the clip-path property in your div elements.

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);

By using the clip path property, you can clip your elements into various shapes. The polygon method offers precise control to define linear paths along the element. By specifying the vertices of the polygon, you can create intricate shapes with clockwise precision.

For assistance in creating shapes through code, visit

In this example, the coordinates provided correspond to x = 0, y = 0 (top left corner), the rightmost corner, the bottom right corner, and the midpoint of the left edge at 50%.

The clip path will eliminate any background outside of this defined shape.

Keep in mind that while the div itself remains a rectangular block, its content may overflow if height and padding are not managed correctly.

body {
  background: #333;
}

.parent {
  height: 200px;
  background: yellow;
  position: relative;
  overflow: hidden;
  display: block;
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
}

.parent-white {
  height: 200px;
  background: white;
}

<div class="parent-white">
  <div class="parent">
  
  </div>
</div>

Issue with linear gradient not functioning in :before pseudo element

Answer №1

Answer №2

Answer №3

Similar questions

Ways to expand a navbar background without compromising the central alignment of its elements

Displaying content generated by Html.Raw in MVC4 using JavaScript and AJAX is causing displacement of content within the <a> tags in the HTML

Firefox is unable to display SWF files

Error encountered when using Symfony 2 command line interface

Ways to adjust iframe height as it loads

The percentage height setting for a div is not functioning properly, but setting the height in pixels or viewport

Creating an interactive button using RichFaces and Bootstrap for seamless Ajax functionality

Show different text or letter when hovering

Parsing HTML with Qt library isn't able to detect any elements

Stop the MatSort feature from activating when the space key is pressed in Angular Material

Troubleshooting Problems with CSS Span Placement

The functionality of jQuery click events seems to be disabled on the webpage, however, it is working perfectly fine on jsFiddle

Incorporating Ace Editor into a jQuery UI Resizable Element

Switch up the placement of articles, going back and forth between left

Unable to choose the specific div element within the container that has an inset shadow applied by utilizing Pseudo

Columns with adjustable widths

"Troubleshooting a dropdown navigation bar problem in CSS

Insufficient column height when using CSS flex-grow property

How to make background color transparent in CSS for Safari browser

Incorporating an HTML image into a div or table using jQuery