Question

编辑3：在弄乱了小提琴之后，我已经缩小了实际创造的那个缺口。 Here's the Fiddle

我能在这里弄清楚的是确定每个部分，蓝色部分和红色部分的高度。

编辑2：我可以通过检查Chrome中的元素看到绿色框的最右边部分（最后32px）是.callout-text :: after。带有凹口的绿色部分正在使用背景图像创建：在css之后。

编辑：我创建了一个小提琴：http://jsfiddle.net/ravencrowe/sk33jtz7/15/

正如协作项目中的典型情况一样，我已被分配来修复其他人创建的内容。我在页面上有一个用css创建的图像，我不会理解，所以我真的不知道如何更改它。任何帮助表示赞赏。

以下是页面上的图片：

以及它需要的样子：

请注意，在切口所在的第一张图像中，透明绿色部分的重叠会导致不透明的三角形。第二张图片中的切口也略高一些。

我知道绿色部分和切口是由css创建的，但我真的不知道它是如何工作的。这里是css，callout-text是带有文本的绿色div：

.callout-text:after {
  right: -1em;
  background-image: -webkit-linear-gradient(-135deg, transparent 50%, #50925a 50%), -webkit-linear-gradient(135deg, #50925a 50%, transparent 50%);
  background-image: -moz-linear-gradient(-135deg, transparent 50%, #50925a 50%), -moz-linear-gradient(135deg, #50925a 50%, transparent 50%);
  background-image: -o-linear-gradient(-135deg, transparent 50%, #50925a 50%), -o-linear-gradient(135deg, #50925a 50%, transparent 50%);
  background-image: linear-gradient(-135deg, transparent 87%, rgba(81, 134, 83, 0.9) 50%), linear-gradient(135deg, rgba(81, 134, 83, 0.9) 88%, transparent 50%);
}

绿色区域需要透明，但它与自身重叠的地方不应该比div的其他部分更不透明。另外，我不确定如何让陷阱更高。

Answer 1

通过将主要div的100％高度的伪元素定位在右侧来创建陷阱。

这个伪元素是两个线性渐变的“彩色”。

缺口的垂直位置由各个梯度的％值确定（相差1％）

JSfiddle Demo

.callout,
.callout2 {
    width:200px;
    height:200px;
    background: lightblue;
    position: relative;
    display: inline-block;
    margin-right: 25px;
}
.callout:after {
    content:"";
    position: absolute;
    top:0;
    height:100%;
    width:1em;
    right: -1em;
    background-image:  /* 87% & 88% */
       linear-gradient(-135deg, transparent 87%, rgba(81, 134, 83, 0.9) 50%), 
       linear-gradient(135deg, rgba(81, 134, 83, 0.9) 88%, transparent 50%);
}

.callout2:after {
    content:"";
    position: absolute;
    top:0;
    height:100%;
    width:1em;
    right: -1em;
    background-image: /* 49% & 50% */
         linear-gradient(-135deg, transparent 49%, rgba(81, 134, 83, 0.9) 50%), 
         linear-gradient(135deg, rgba(81, 134, 83, 0.9) 50%, transparent 50%);
}

因此，我认为不太可能，使用这种技术，您将能够删除“双倍”＆＃39;影响。另一种方法是使用两个伪元素和通常的三角边界技术。

此处显示了该技术的演示

JSfiddle Demo

<强> CSS

.three:after,
.three:before {
    content:"";
    position: absolute;
    width:0;
    height:calc(50% - .335em);
}

.three:after {
    top:0;
    border:.5em solid rgba(81, 134, 83, 0.9);
    border-right-color:transparent;
    border-bottom-color:transparent;
    border-top-width:0;
    border-right-width:0;
    right: -.5em;
}

.three:before {
    top:50%;
    border:.5em solid rgba(81, 134, 83, 0.9);
    border-right-color:transparent;
    border-top-color:transparent;
    border-right-width:0;
    border-bottom-width:0;
    right:-.5em;
}

Answer 2

你看到的三角形是由一个使用边框的小css技巧创建的。看看，在div上，你有0宽度和0高度但有很多边框的元素，比方说30px边框。那你有类似的东西

enter image description here 对不起，我的绘画技巧不太好：P。我为L表示左边框，R表示右边框，T表示顶部边框，B表示底部边框。

你可以看到边框顶部是在顶部创建的，但不是整个正方形，它们最终会被另一边框切割，在这种情况下是边框左右。你看到你的div有0宽度和0高度以及很多边框时，这些边框是以三角形形式生成的。如果您的宽度为50px，高度为50px，您将拥有以下内容：

enter image description here 在这里，您将在边框中看到相同的行为，但实际上您看不到三角形，因为您有内容。你会看到一个梯形形状。当内容为0宽度和0高度时，您现在可以理解为什么它看起来像一个三角形，因为梯形的一边宽度为0长度。

现在你必须找到那个有边框的元素，你现在知道第一个图像中的左边三角形可能有边框颜色为白色，这就是为什么你看到绿色层背后的三角形不透明的原因。你只需要给边框颜色一个透明的颜色，你就可以处理它了。

使用css webkit-linear-gradient创建图像

2 个答案: