使用html和css创建对角线

Question

我正在尝试创建以下设计，该描述在描述上具有对角线，覆盖图像。我正在努力完成最好的方法就是使用html和css所以想知道是否有人可以指出我正确的方向吗？

label

我创建了这个代码集（），它显示了我目前拥有的HTML和CSS。

<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>

任何建议都会很棒

由于 保罗

Answer 1

我认为这个问题会解决这个问题，把这个css与你的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;
}