顶部的内部透明箭头 [英] Inside transparent arrow on the top

问题描述

我想在图像上画一个透明的箭头.该三角形应缩进一个方块并显示背景图像.

I would like to make a transparent arrow over an image. This triangle should be indented in a block and show the background image.

所需的输出:

我使用了@ web-tiki在此处解释的skewX()属性我希望它显示在边框的顶部而不是图像的底部，并出现以下问题:

I used skewX() property that @web-tiki had explained here but I want it to display on the top of the border rather than on the bottom of image and have this issue:

可以在此处

有人可以告诉我为什么它在我的情况下不起作用吗?

Can anyone tell me why it's not working in my case?

推荐答案

如问题中所述，您的情况与 web-tiki 提供的arrow-triangle/23759602#comment49404280_23759602>示例.在您所引用的示例中，具有透明切割的边框被包括为图像的底部边框，而您需要将其作为纯文本区域的顶部边框.

As stated in the question, your case is a bit different from the example that was provided by web-tiki. In the example that you were referring to, the border with the transparent cut was included as the bottom border for the image whereas you need it as the top border of the plain text area.

可以使用该答案中描述的相同的skew技术来实现预期的输出.但是，需要进行一些调整以适合您的情况.

The expected output can be achieved with the same skew technique described in that answer. However, it needs to be tweaked a bit to match your case.

• 第一件事是，应将倾斜的伪元素(产生边框)添加到纯文本区域的容器中，而不是添加到保存图像的顶部区域中.您已经正确完成了这一部分.
• 接下来，您需要调整边框的位置，以使即使带有边框，文本容器的高度也将等于其侧面放置的其他两个图像.为此，您需要将构成边框的元素放置在纯文本容器(top: 0%)内，而不是在其上方(代码中的bottom: 100%).
• 然后，如果文本容器具有不透明的背景，则需要对其进行裁剪，以使该文本不出现在创建边框效果的元素后面.这可以通过在文本容器上添加等于边框伪元素的height的padding-top，然后将其设置为background-clip: content-box来实现.
• 最后，您需要将整个底部向上移动与边框高度相同的像素数，以便通过透明切出区域可以看到顶部图像.这可以通过在底部容器中添加负数margin-top来完成.

• First thing is, the skewed pseudo-elements (that produce the border) should be added to the container of plain text area and not the top section which holds the image. This part you have already done correctly.
• Next, you need to position the border such that even with the border the height of your text container will be equal to the other two images placed by its side. For this, you need to position the elements that form the border within the plain text container (top: 0%) instead of above it (bottom: 100% in your code).
• Then, if the text container has a non-transparent background, you need to clip it such that it is not present behind the elements that is creating the border effect. This can be achieved by adding a padding-top on the text container equal to the height of the border pseudo-elements and then setting background-clip: content-box to it.
• Finally, you need to move the entire bottom part up by the same number of pixels as the height of the border in order for the top image to be seen through the transparent cut out area. This can be done by adding a negative margin-top to the bottom container.

将其放在一起，您的代码应与以下代码段相似，以实现所需的效果. (注意:您的小提琴有太多的代码，因此我为演示创建了一个更简单的示例.)

Putting it altogether your code should be similar to the below snippet to achieve the effect that you need. (Note: Your fiddle has way too much code and so I have created a simpler sample for the demo).

.section {
  height: 200px;
  width: 500px;
  background: url(http://lorempixel.com/500/200/nature/3);
}
.bottom-container {
  margin-top: -15px;
  height: 100px;
  width: 500px;
}
.text,
.middle-image,
.right-image {
  float: left;
  height: 100%;
  width: calc(100% / 3);
}
.middle-image {
  background: url(http://lorempixel.com/200/100/nature/2);
}
.right-image {
  background: url(http://lorempixel.com/250/100/nature/1);
}
.text {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  padding-top: 15px;
  text-align: center;
  line-height: 85px;
  background: #F7F7F7; /* Just for demo */
  background-clip: content-box; /* needed only if your background is not transparent */
  overflow: hidden;
}
.text:after,
.text:before {
  position: absolute;
  content: '';
  top: 0px;
  height: 15px;
  background: rgb(215,182,115);
}
.text:before {
  left: 0px;
  width: 25%;
  transform-origin: left bottom;
  transform: skew(45deg);
}
.text:after {
  right: 0px;
  width: 75%;
  transform-origin: right bottom;
  transform: skew(-45deg);
}

<!-- prefix free library to avoid browser prefixes in CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<section class="section">
</section>
<div class="bottom-container">
  <div class="text">Some text</div>
  <div class="middle-image"></div>
  <div class="right-image"></div>
</div>

截屏:

^{注意:执行摘要时显示的图像可能与屏幕快照中的图像不同，因为它们是随机占位符图像}

这篇关于顶部的内部透明箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！