使用CSS WebKit-Linear-Gradient創建圖像

Question

編輯3：在弄弄Fiddle之后，我縮小了實際創建該缺口的范圍。 這是小提琴

我無法確定的是確定每個部分，藍色部分和紅色部分的高度的原因。

編輯2：通過檢查Chrome中的元素，我可以看到綠色框的最右邊部分（最后一個32px）是.callout-text :: after。 帶有缺口的綠色部分是通過：after css中的background-image創建的。

編輯：我創建了一個小提琴來使用： 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演示

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

因此，我認為使用這種技術不太可能消除“雙重效應”。 另一種選擇是使用兩個偽元素和通常的三角形邊界技術。

這里顯示了THAT技術的演示

JSfiddle演示

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邊框。 然后你有這樣的事情

對不起，我的繪畫技巧不太好：P。 我為左邊框寫了L，為右邊框寫了R，為頂部邊框寫了T，為底部邊框寫了B。

您可以看到邊框頂部是在頂部創建的，但並非整個正方形都位於頂部，它們最終將邊由另一個邊框（在本例中為左右邊框）切開。 您會看到div的寬度為0，高度為0且邊框很多時，這些邊框以三角形形式生成。 如果您擁有50px的寬度和50px的高度，則將具有以下內容：

在這里，您將在邊框中看到相同的行為，但實際上看不到三角形，因為里面有內容。 您會看到一個梯形形狀。 現在，當content為0寬度和0高度時，您會理解為什么它看起來像三角形，因為梯形的一側寬度為0長度。

現在，您只需要查找具有該邊框的元素，就可以知道第一幅圖像中的左三角形可能具有白色的邊框顏色，這就是為什么看到三角形在綠色層后面不透明的原因。 您只需為邊框顏色提供透明的顏色，然后您就可以對其進行處理。