Creating diagonal lines using html and css

Question

I am attempting to create the following design that has a diagonal line on the description which overlays the image. I am struggling on the best way to accomplish is using just html and css so was wondering if someone can point me in the right direction please?

I have created this codepen (https://codepen.io/prgriffithsdev/pen/EbQZeR) which shows the HTML and CSS that i currently have.

<section id="employee" class="home-section employee-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="employee-item-wrapper">
                            <h4>Joe Bloggs</h4>
                            <p class="role">Graduate, London</p>
                            <img class="img-responsive" src="http://via.placeholder.com/768x768" alt="image alt" title="image alt">
                            <div class="desc">
                                <p>
                                    "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                                    The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using"
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="employee-item-wrapper lower">
                            <h4>Joe Bloggs 1</h4>
                            <p class="role">Graduate, London</p>
                            <img class="img-responsive" src="http://via.placeholder.com/768x768" alt="image alt" title="image alt">
                            <div class="desc">
                                <p>
                                    "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                                    The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using"
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="employee-item-wrapper">
                            <h4>Joe Bloggs 2</h4>
                            <p class="role">Graduate, London</p>
                            <img class="img-responsive" src="http://via.placeholder.com/768x768" alt="image alt" title="image alt">
                            <div class="desc">
                                <p>
                                    "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                                    The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using"
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="employee-item-wrapper lower">
                            <h4>Joe Bloggs 3</h4>
                            <p class="role">Graduate, London</p>
                            <img class="img-responsive" src="http://via.placeholder.com/768x768" alt="image alt" title="image alt">
                            <div class="desc">
                                <p>
                                    "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                                    The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using"
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

Any advice would be great

Thanks Paul

Possible duplicate of [Shape with a slanted side (responsive)](https://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive) — Mohammad Usman, Nov 20 '17 at 13:17
The simplest solution is to use an SVG or PNG background image for the div, and place a text container inside the div. — Kokodoko, Nov 20 '17 at 13:40

score 2 · Accepted Answer · answered Nov 20 '17 at 13:40

i think this problem will slove with this css, put this css with your css

.desc::before {
    content: "";
    height: 50px;
    width: 100%;
    display: block;
    border-left: 0px solid blue;
    border-right: 263px solid #F4F4F4;
    border-bottom: 0px solid #000;
    border-top: 50px solid transparent;
    margin-top: -65px;
    position: absolute;
    z-index: 1;
    left: -15px;
}

Creating diagonal lines using html and css

1 Answers1