How to create slanted Images with CSS?

Question

What I am going for ?

We have 4 column, that needs to appear with certain degree of Slant on the background Images.

What I have tried ?

Using CSS Property clip-path, I am able to create layout presented on the Image. However, the width is not full-screen.

HTML

<section class="full-width-container">
    <div class="row">

            <div id="ktk-slant-col-1" class="ktk-slanted-column__item" style="background-image: url(/wp-content/uploads/2021/09/pexels-gerzon-pinata-9511923.jpg);clip-path: polygon(0 0, 100% 0, 76% 100%, 0% 100%);"></div>

            <div id="ktk-slant-col-2" class="ktk-slanted-column__item" style="background-image: url(/wp-content/uploads/2021/09/pexels-lucas-fonseca-2239655.jpg);clip-path: polygon(24% 0, 100% 0, 76% 100%, 0% 100%);"></div>
            
            <div id="ktk-slant-col-3" class="ktk-slanted-column__item" style="background-image: url(/wp-content/uploads/2021/09/pexels-pixabay-247763.jpg);clip-path: polygon(24% 0, 100% 0, 76% 100%, 0% 100%);"></div>
        
            <div id="ktk-slant-col-4" class="ktk-slanted-column__item" style="background-image: url(/wp-content/uploads/2021/09/pexels-lucas-fonseca-2239655.jpg);clip-path: polygon(24% 0, 100% 0, 100% 100%, 0% 100%);"></div>

    </div>
</section>

CSS

.ktk-slanted-column__item {
    position: relative;
    -webkit-box-flex: 0;
    height: 540px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.ktk-slanted-column__item::after {
    content: '';
    background: #0079C1;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.4s ease-in-out 0s;
}

.ktk-slanted-column__item:hover::after {
    opacity: 0.66;
}

.ktk-slanted-column__item {
    width: 25%;
}

#ktk-slant-col-2 {
    left: -95px;
}

#ktk-slant-col-3 {
    left: -190px;
}

#ktk-slant-col-4 {
    left: -284px;
}

And the result is :

Please add the all required css to generate atleast what you have created so far — Vijay Kumawat, Sep 21 '21 at 11:25
You've set the width of each item to 25%, but if you look at the required result the wider widths are more than that - the amount by which the items need to be wider depends on what slope you want. — A Haworth, Sep 21 '21 at 12:04

Krishna · Answer 1 · 2021-09-24T01:47:58.037

I have found an article about the slanted images and here you go :

Flexible Captioned Slanted Images

.ktk-slanted-column__item {
    position: relative;
    -webkit-box-flex: 0;
    height: 540px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 31.5%;
    margin-right: -8.5%;
}

.ktk-slanted-column__item::after {
    content: '';
    background: #0079C1;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.4s ease-in-out 0s;
}

.ktk-slanted-column__item:hover::after {
    opacity: 0.66;
}

In Codepen https://codepen.io/crisnaxtha/pen/OJgwawB

How to create slanted Images with CSS?

1 Answers1