Trying to place text in specific area, not showing?

HTML & CSS
1

Im trying to make a design that allows me to place a text on the bottom right hand corner of a div that shows a slanted view.

<div class="shape">
   <h2 class="content">HELLO</h2>
</div>

.shape{
    width: 100%;
    height: 500px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    background-color: red;
    position: relative;
    z-index: -1;

    h2.content{
        position: absolute;
        bottom: 15px;
        right: 10px;
        color: green;
        z-index: 1;
    }
}

2454Ă—858 22.8 KB

I’m trying to have the text appear in the corner, but it doesnt since i’m assuming the div is clipping that area. The big red square will have content eventually, but right now its empty since i want the text to appear before continuing. Anyway to get that going? Thanks

2

I don’t quite understand your CSS, but it looks like there is an extra closing brace at the bottom and a missing closing brace after .shape.

I don’t see an irregular polygon in FF, just a regular rectangle.

You should not need any z-index.

FYI, the clip-path property is not well supported,yet.

3

I still don’t see anything is FF, but in Chrome, this works

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/trying-to-place-text-in-specific-area-not-showing/241387
Oct 26, 7:06 PM
JAVazquez95
-->
    <style type="text/css">
.content {
    position:relative;
    outline:1px dashed blue;
}
.shape {
    width:100%;
    height:500px;
    -webkit-clip-path:polygon(0 0, 100% 0, 100% 75%, 0 100%);
    clip-path:polygon(0 0, 100% 0, 100% 90%, 0 100%);
    background-color:red;
}

h2 {
    position:absolute;
    bottom:15px;
    right:10px;
    color:green;
}
    </style>
</head>
<body>

<div class="content">
    <div class="shape"></div>
    <h2>HELLO</h2>
</div>

</body>
</html>
4

The extra semicolon from your first reply is due to SASS nesting. I did read thats it is only usable in chrome (clip-path). Your snippet of code is exactly what i am looking for. Thank you for your code and assistance. However, how could i get the same result if i wanted to use it in all modern browsers (Firefox, Chrome, Edge, etc.)

5

The question becomes one of choices. Which do you seek?
(1) that the angle of slope remain the same? In which case the height of the white space at the right will increase and decrease as the width of the page changes in viewports.
(2) that the height of the right end of the slope remain the same? In which case the angle of the slope will change as the width of the page changes. It will be steep at narrow widths; behavior like clip-path.

1 Like
6

Rather than use a clipping path you could make that shape with SVG and apply it as a background to the div.

7

Or with limited degrees of success you could transform an element to get the slanted effect.

(Probably the least usable of the methods already mentioned though :))

2 Likes
9

Similar to @PaulOB’s. It seems to work rather well. The height of the sloper box can be reduced if the range of widths to be covered can be limited.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>transform:skew</title>
<!--
https://www.sitepoint.com/community/t/trying-to-place-text-in-specific-area-not-showing/241387
Oct 26, 7:06 PM
JAVazquez95
-->
    <style type="text/css">
.contentbox {
    height:500px;
    overflow:hidden;
    background-color:rgba(255,0,0,1);
    position:relative;
    outline:1px dashed blue;  /* TEST Outline. To Be DELETED */
}
.sloper {
    width:100%;
    height:140px;  /* limit as desired for range of widths covered */
    position:absolute;
    bottom:0;
    transform:skewY(-4deg) translateY(50%);
    background-color:rgba(255,255,255,1);
}
h2 {
    position:absolute;
    right:12px;
    bottom:3vw;  /* tweak vertical position of text */
    color:green;
}

    </style>
</head>
<body>

<div class="contentbox">
    <div class="sloper"></div>
    <h2>HELLO</h2>
</div>

</body>
</html>
1 Like
10

This uses a background image to create the sloping bottom. One could use an svg as @SamA74 recommended instead of the bg-image. This keeps the start and end heights of the sloped area the same but the angle of the slope becomes more acute at narrow widths. The height of the slope is the height of the background image so it is easily adjusted in CSS.

Very simple.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>background image</title>
<!--
https://www.sitepoint.com/community/t/trying-to-place-text-in-specific-area-not-showing/241387
Oct 26, 7:06 PM
JAVazquez95
-->
    <style type="text/css">
.sloper {
    outline:1px dashed blue;
    height:500px;
    background-color:#f00;
    background-image:url(images/WhiteSloped960x100.png);  /* img of right triangle */
    background-repeat:no-repeat;
    background-position:50% 100%;
    background-size:100% 100px;
    position:relative;
}
h2 {
    position:absolute;
    bottom:12px;
    right:12px;
    color:green;
}
    </style>
</head>
<body>

<div class="sloper">
    <h2>HELLO</h2>
</div>

</body>
</html>
1 Like
11

What about making the shape with a pseudo element instead of the extra markup or background image?

If there isn’t a browser bug I’m not aware of (afraid I’m not up to date yet) that affects manipulating a pseudo element instead like in the OP or your demos here.’

With posted code e.g.:

post #3:

.shape{
    position: relative;
    width: 100%;
    height: 500px;
}
.shape::after{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    background-color: red;
    content:"\a0";
}

post #9:

.contentbox{
    position:relative;
    outline:1px dashed blue;  /* TEST Outline. To Be DELETED */
    height:500px;
    overflow:hidden;
    background-color:rgba(255,0,0,1);
}
.contentbox::after{
    position:absolute;
    z-index: -1;
    bottom:0;
    width:100%;
    height:140px;  /* limit as desired for range of widths covered */
    transform:skewY(-4deg) translateY(50%);
    background-color:rgba(255,255,255,1);
    content:"\a0";
}

Just my two cents.

1 Like
12

Thanks for posting the improved versions of my code. I tried to use ::after before I posted my versions with the tags and was unable to make it work. I was probably just tired and made an error and then couldn’t find it. :lol:

Looks like the z-index in your first example is unnecessary since the clip-path essentially removes that portion of the background. Doesn’t hurt anything, just not needed.

In the second example the negative z-index is likewise unnecessary and ::before seems to work better than ::after. The white overlay is on top of the red background and the text is above the white overlay. Using ::after, the text is beneath the white overly and needs z-index:1 to keep it from hiding beneath the white overlay.

I still don’t know why my attempts last night didn’t work, but they sure didn’t. :rolleyes:

Thanks again, @Erik_J

13

Thanks for testing and fixing my suggestions, sorry I was so lazy.

Just wanted to mention the pseudo element option as it wasn’t posted.

1 Like
14

The pseudo-element is the “right” way to go, as @PaulOB posted.

Glad you guided me back to look at it again.

1 Like
15

How about a linear gradient?

3 Likes
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.