Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Slanted divs

Slanted divs

Slanted divs

I have a design containing slanted areas. I've done this in the past using pseudo elements before and after, to add the slants on the divs. This worked great when the divs were full colour blocks.

However this time, the divs contain images, so a pseudo element won't clip the image (I have attached an image of what I am trying to create).

I've been playing around with clip-path which is working well for either top or bottom, but I can't figure out whether I can do both top and bottom clips.

.angled-both {  
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
   clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); 

/*website is wordpress, emulating the block styles*/
.wp-block-media-text {display: grid !important; grid-template-columns: 1fr 1fr; z-index: 1}
.wp-block-media-text figure {margin: 0; z-index: 2}
.wp-block-media-text figure img {display: block}
.wp-block-media-text__content {z-index: 3}

<div class="wp-block-media-text alignfull has-media-on-the-right angled-both" style="background-color:#68b5cf">
    <figure class="wp-block-media-text__media">
        <img loading="lazy" width="500" height="500" src="images/drilling.jpg" alt="" class="wp-image-115">
    <div class="wp-block-media-text__content">
        <p style="color:#ffffff" class="has-text-color has-large-font-size">Wordpress Block</p>
        <p style="color:#ffffff" class="has-text-color has-medium-font-size">Media and Text</p>

Can anyone help me achieve this please?


Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close