Make slanted elements on an image transparent

Benjamin Treadwell

I've tried following the guide on Youtube for help and I can get it to work - kinda.

I'm trying to place two divs in a section where the top is to place the image and the bottom is to place the text etc.

What I want is a slanted razor blade in the middle of the top, so the image flows over the bottom div.

I managed to make slanted elements and place them where I want, but when I make them transparent they seem to disappear.

Example : https://imgur.com/DsqNvZI _

my css:

.section_1 {
    height: 800px;
    width: auto;
    background: red;
}

.section_image {
    height: 400px;
    width: auto;
    background: green;
    position: relative;
    background-image: url(lolsovs.jpg);
}

.section_image::after, .section_image::before {
    position: absolute;
    content: '';
    width: 150px;
    height: 150px;
    background: green;
    z-index: 100;
    bottom: -1em;
}

.section_image::after {
    left: 50%;
    transform: skew(0, -20deg);
    z-index: 100;
}

.section_image::before {
    right: 50%;
    transform: skew(0, 20deg);
}

.section_text {
    background: purple;
    height: 400px;
    width: auto;
    z-index: -100;
}

I'm still a novice when it comes to all this stuff, so be gentle with me!

Thanks in advance!

Accompany Affi

But when I make them transparent, they seem to disappear.

This is logical since you made them transparent. I suggest you consider another way to achieve this. You can simply consider some linear gradients to color the bottom so that this transparent part is on top:

.image {
  height: 200px;
  background:url(https://lorempixel.com/400/200/) center/cover no-repeat;
}

.bottom {
  height:200px;
  margin-top:-50px;
  background:
  linear-gradient(to bottom left,transparent 50%,purple 51%)calc(50% - 21px) 0/40px 50px no-repeat,
  linear-gradient(to bottom right,transparent 50%,purple 51%)calc(50% + 20px) 0/40px 50px no-repeat,
  linear-gradient(purple,purple)100% 0/calc(50% - 40px) 50px no-repeat,
  linear-gradient(purple,purple)0 0/calc(50% - 40px) 50px no-repeat,
  linear-gradient(purple,purple)0 50px/100% 100% no-repeat;
}
<div class="image">
</div>
<div class="bottom">

</div>

For better handling, you can use CSS variables to adjust the size:

.image {
  height: 200px;
  background:url(https://lorempixel.com/400/200/) center/cover no-repeat;
}

.bottom {
  height:200px;
  margin-top:calc(-1 * var(--h,50px));
  background:
  linear-gradient(to bottom left,transparent 50%,purple 51%)calc(50% - (var(--w,50px) /2)) 0/var(--w,50px) var(--h,50px) no-repeat,
  linear-gradient(to bottom right,transparent 50%,purple 51%)calc(50% + (var(--w,50px) /2)) 0/var(--w,50px) var(--h,50px) no-repeat,
  linear-gradient(purple,purple)100% 0/calc(50% - var(--w,50px)) var(--h,50px) no-repeat,
  linear-gradient(purple,purple)0 0/calc(50% - var(--w,50px)) var(--h,50px) no-repeat,
  linear-gradient(purple,purple)0 var(--h,50px)/100% 100% no-repeat;
}
<div class="image">
</div>
<div class="bottom" style="--h:80px;--w:100px">

</div>

Related

Make image inside slanted div normal

Muhammad As in the question below. I'm trying to make content, in this case it's an image inside a div that should be skewed. In other words, the div should be skewed and the image inside should not be skewed. I am using: -ms-transform: skew(-15deg, 0deg); -we

How to make a transparent image

username I want to plot 4 different states that overlap. How to make this graph show all 4 states Please find my sample data below: dput (head(dfs_melted, 20) ) structure(list(id = c(1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L,

How to make a transparent image

username I want to plot 4 different states that overlap. How to make this graph show all 4 states Please find my sample data below: dput (head(dfs_melted, 20) ) structure(list(id = c(1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L,

How to make a transparent image

username I want to plot 4 different states that overlap. How to make this graph show all 4 states Please find my sample data below: dput (head(dfs_melted, 20) ) structure(list(id = c(1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L,

make png image transparent

Lan Yueqi I PictureBoxadded Panel1in Panel1.Controls.Add(pb)and tried to make the .pngimage transparent. I tried using Color.Transparentand together System.Drawing.Color.Transparent, but when I add it PictureBoxto Panel, I can't make it transparent. And I can'

Make image transparent in CSS

where are people So here is my code and it works fine, but I want the image to be 50% transparent. #esc1{ position: absolute; top:30px; right: 0; width: 30px; height: 30px; } Sorry, I posted wrong code earlier. Bhavin Shah Set the opacity for the

How to make a transparent image

username I want to plot 4 different states that overlap. How to make this graph show all 4 states Please find my sample data below: dput (head(dfs_melted, 20) ) structure(list(id = c(1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L,

How to make a transparent image

username I want to plot 4 different states that overlap. How to make this graph show all 4 states Please find my sample data below: dput (head(dfs_melted, 20) ) structure(list(id = c(1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L,

How can I make the image "normal" in a slanted div?

Wiski So I want to make a diamond with an image, but the image is distorted. I am going to make it level (normal) and fill with diamonds. code I wrote . .diamond { width: 300px; height: 300px; border: 3px solid white; outline: 2px solid black; outlin

How can I make the image "normal" in a slanted div?

Wiski So I want to make a diamond with an image, but the image is distorted. I am going to make it level (normal) and fill with diamonds. code I wrote . .diamond { width: 300px; height: 300px; border: 3px solid white; outline: 2px solid black; outlin

How can I make the image "normal" in a slanted div?

Wiski So I want to make a diamond with an image, but the image is distorted. I am going to make it level (normal) and fill with diamonds. code I wrote . .diamond { width: 300px; height: 300px; border: 3px solid white; outline: 2px solid black; outlin

How can I make the image "normal" in a slanted div?

Wiski So I want to make a diamond with an image, but the image is distorted. I am going to make it level (normal) and fill with diamonds. code I wrote . .diamond { width: 300px; height: 300px; border: 3px solid white; outline: 2px solid black; outlin

How can I make the image "normal" in a slanted div?

Wiski So I want to make a diamond with an image, but the image is distorted. I am going to make it level (normal) and fill with diamonds. code I wrote . .diamond { width: 300px; height: 300px; border: 3px solid white; outline: 2px solid black; outlin

How can I make the image "normal" in a slanted div?

Wiski So I want to make a diamond with an image, but the image is distorted. I am going to make it level (normal) and fill with diamonds. code I wrote . .diamond { width: 300px; height: 300px; border: 3px solid white; outline: 2px solid black; outlin

Make the transparent part of the image on the button transparent

Lidi Mountain I used 2 images, one is the background of the screen and the other is the background of the button. The image of the button is transparent in some parts. I want it to overlay the transparent part of the background image It should look like this ,

Make the transparent part of the image on the button transparent

Lidi Mountain I used 2 images, one is the background of the screen and the other is the background of the button. The image of the button is transparent in some parts. I want it to overlay the transparent part of the background image It should look like this ,

How to make transparent elements overlap other elements?

ondriba I'm trying to create an element that has the same color as the background (even though the background has multiple colors), but still overlaps some elements. #arrow_up { position: absolute; top: 0; border-left: 20px solid transparent; borde

How to make transparent elements overlap other elements?

ondriba I'm trying to create an element with the same color as the background (even though the background has multiple colors), but it still overlaps some elements. #arrow_up { position: absolute; top: 0; border-left: 20px solid transparent; border

How to make transparent elements overlap other elements?

ondriba I'm trying to create an element with the same color as the background (even though the background has multiple colors), but it still overlaps some elements. #arrow_up { position: absolute; top: 0; border-left: 20px solid transparent; border

Make BoxDecoration image fade/transparent

Action options: I have the following code snippet, I want to fade the image so it doesn't interfere with other items in the container. Is there a filter that can do this? child: new Card( child: new Container( decoration: new BoxDecoration( color:

Make HTML image "click transparent"

Mickey Cool 1 I have an image and on top of that image is another smaller image. When the first image is clicked, the second image appears, and when the first image is clicked again, the second image disappears. My problem is that when the second image appears

PIL: make image transparent by percentage

Paul How to make the watermarkimage transparent? For example, 60% transparent. I tried putalphait but it doesn't seem to work from PIL import Image temp_image = Image.open('test1.jpg') watermark = Image.open('watermark.png') x, y = temp_image.size image_wi

Make BoxDecoration image fade/transparent

Action options: I have the following code snippet, I want to fade the image so it doesn't interfere with other items in the container. Is there a filter that can do this? child: new Card( child: new Container( decoration: new BoxDecoration( color: