發佈本文CSS3

我想創建與過渡和箱陰影純CSS3張貼的紙張。到目前爲止，我已經完成了與陰影紙兩面，但我想使它看起來像這樣：發佈本文CSS3

是，即使可能沒有圖像？

.shadow { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: yellow; 
 
    position: relative; 
 
} 
 
.shadow:after { 
 
    position: absolute; 
 
    right: 10px; 
 
    left: auto; 
 
    -webkit-transform: skew(8deg) rotate(3deg); 
 
    -moz-transform: skew(8deg) rotate(3deg); 
 
    -ms-transform: skew(8deg) rotate(3deg); 
 
    -o-transform: skew(8deg) rotate(3deg); 
 
    transform: skew(8deg) rotate(3deg); 
 
}

<div class="shadow"> 
 
    edit this even further 
 
</div>

來源

2015-07-21 WeBWeB

你可以發佈你試過什麼碼？ – Persijn

.shadow：後 { \t右：10px的; left：auto; -webkit-transform：skew（8deg）rotate（3deg）; -moz-transform：skew（8deg）rotate（3deg）; -ms-transform：skew（8deg）rotate（3deg）; -o-transform：skew（8deg）rotate（3deg）; transform：skew（8deg）rotate（3deg）; } 能貼更多...最多字符.... – WeBWeB

通常你張貼你的努力當你問的問題做代碼或示例代碼。我將編輯您在評論中發佈的內容。再次編輯以添加您自己的代碼。 – Persijn

這裏是我的嘗試，只是爲了讓你的想法。

需要大量的藝術調整，但需要的所有元素。

包括背面能見度：隱藏;感謝哈利建議

.test { 
 
    width: 300px; 
 
    height: 300px; 
 
    left: 50px; 
 
    top: 50px; 
 
    border-bottom-left-radius: 250px 45px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    transform: rotate(-19deg); 
 
    box-shadow: -9px 10px 31px 6px gray; 
 
    backface-visibility: hidden; 
 
} 
 

 
.test:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background-color: yellowgreen; 
 
    border-bottom-left-radius: 45px 250px; 
 
    background-image: radial-gradient(circle at 50px 180px, rgba(255,255,255,0.3), transparent 70px), 
 
    radial-gradient(circle at 85px 215px, rgba(255,255,255,0.4), transparent 70px), 
 
    radial-gradient(circle at 120px 250px, rgba(255,255,255,0.3), transparent 70px); 
 
    box-shadow: -9px 10px 14px 22px gray; 
 
}

<div class="test"></div>

來源

2015-07-22 18:41:35 vals

非常好的嘗試。您可以向父級添加「backface-visibility：hidden;」以使形狀更平滑。 – Harry

@哈里謝謝！ – vals

回答

相關問題