php - 掩蔽 BG 图像

Question

我正在尝试在我的 WordPress 图片/帖子中创建以下内容。

我也需要它具有响应能力，所以我使用了 Bootstrap 3 和背景图片。

帖子的代码片段:

<div class="row">   
    <div class="col-md-4">
        <h1>Title</h1>
        <p>content goes here</p>
    </div>          
    <div class="col-md-8" style="background-image:url('<?php echo $thumbnail_url ?>');">
    </div>               
</div>

background-image:url 只是从帖子中获取特色图片并将其作为背景。

我正在寻找那个蒙面箭头，或者至少伪造它。

Answer 1

使用伪元素和透明边框来伪装

在此示例中，使用 ::before 和 ::after 伪元素将两个空框添加到 .image。

盒子是透明的，除一侧外，所有边框都是透明的。每一个都被定位成沿着容器一侧的一半拉伸(stretch)，并且它们的边缘接触。

在边界的 Angular 相交处形成三 Angular 形。

.image 容器除了放置伪框的那一侧外，所有的边都设置了相同样式的边框，这就完成了带有箭头的剪切蒙版的错觉边。

媒体查询用于更改伪元素的位置并沿不同的边缘重新着色边框。

提示:查看“整页”并更改视口(viewport)大小以查看正在运行的媒体查询。

.image {
    width: 150px;
    height: 150px;
    margin: 10px;
    background-image: url('http://placehold.it/150/009afd/ffffff/&text=Aw%2C%20yeah.');
}

.clipping-arrow {
    position: relative;
    overflow: visible;
    border: 10px solid white;
    border-color: white white transparent white;
}

.clipping-arrow::before,
.clipping-arrow::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px;
    border: 10px solid white;
    border-color: transparent transparent white transparent;
}

.clipping-arrow::before {
    right: 50%;
    left: -10px;
}

.clipping-arrow::after {
    right: -10px;
    left: 50%;
}

@media (min-width: 400px) {
    .clipping-arrow {
        border-color: white transparent white white;
    }

    .clipping-arrow::before,
    .clipping-arrow::after {
        right: -10px;
        left: auto;
        border-color: transparent white transparent transparent;
    }

    .clipping-arrow::before {
        top: -10px;
        bottom: 50%;
    }

    .clipping-arrow::after {
        top: 50%;
        bottom: -10px;
    }
}

<div class="clipping-arrow image"></div>