Question

我有一个倒三角图像叠加的问题。我已从codepen.io创建了此 DEMO 。

在我的演示中我想要的是你可以看到图像中有一个冒泡div。图像右侧的三角形看起来。我希望它出现在图片的三角形中。我怎么能这样做，任何人都可以帮助我？

CSS：

.bubble 
{
position: fixed;
width: 345px;
height: 235px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: #d8dbdf solid 1px;
  -webkit-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
-moz-box-shadow:    -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
box-shadow:         -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent #fff;
display: block;
width: 0;
z-index: 1;
right: -10px;
top: 16px;

}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent #d8dbdf;
display: block;
width: 0;
z-index: 0;
right: -11px;
top: 16px;
}
.film_bilgileri{
  float:left;
  width:345px;
  height:235px;
  background-color:red;
}
.film_kapak{
  float:left;
  width:345px;
  height:120px;
  background-color:white;
  overflow:hidden;
}
.film_kapak img {
 width:100%; 
  -webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
  -webkit-backface-visibility: hidden;
}

HTML：

<div class="container">
  <div class="bubble">
    <div class="film_bilgileri">
      <div class="film_kapak">
        <img src="abc.jpg">
      </div>
    </div>
  </div>
</div>

Answer 1

一种方法是使用白色边框创建透明三角形，并使用白色背景元素在上方和下方进行遮罩。

使用白色遮罩的透明三角形由：

创建

border-left: 11px solid transparent;
border-top: 11px solid white;
border-bottom: 11px solid white;

工作示例：http://jsfiddle.net/064ojpm8/

（注意 - 它不是生产材料，只是为了给你这个想法）

Answer 2

如果您希望三角形指向图像，可以在:after伪元素中使用Sgoldy中的代码：

.bubble:after {
  content: '';
  position: absolute;
  width: 0;
  border-right: 11px solid white;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  z-index: 1;
  right: 0px;
  top: 36px;
}

我刚刚使用right: 0px;将元素移到左侧并更改了边框值。

您不需要:before

DEMO

CSS bubble div反转三角形图像叠加

2 个答案: