掩盖BG图像

Question

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

我需要它才能响应，所以我使用的是Bootstrap 3和背景图像。

帖子的代码段：

.page {
  overflow: hidden;
  min-height: 100vh;
  .sidebar {
    position: fixed;
    @media #{$small} {
      position: relative;
    }
  }
}

<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> 只是从帖子中获取精选图片并将其作为背景。

我希望得到那个蒙面箭头，或者至少假装它。

Answer 1

使用伪元素和透明边框来伪造它

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

盒子是透明的，除了单面外，它的所有边框都是透明的。每个都定位成使它们沿着容器一侧的一半伸展，边缘接触。

在边界的角落相遇处形成三角形。

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

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

提示：查看＆＃34;整页＆＃34;并更改您的视口大小以查看正在运行的媒体查询。

＆＃13;

＆＃13;

.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;
    }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;