知識(shí)儲(chǔ)備

1.linear-gradient()漸變效果（這個(gè)屬性真的越用越喜歡）
2 transform 中的translate和rotate效果

小測(cè)試

先來看看效果，是否會(huì)大吃一驚呢？！

逼真的折角效果

這里請(qǐng)?jiān)徱幌耤hrome的渲染真的很糙

示例代碼：
html

<div class="corner">    
  "The only way to get rid of a temptation is yield to it.Resist it,and your soul grows sick with longing for the things it has forbidden to itself."    
  <br/>  -Oscar Wilde,The Picture of Dorian Gray
</div>

做好準(zhǔn)備，又開始拋代碼了
這里是給整個(gè)容器設(shè)置背景（被裁了一角的背景）
css

.corner{   
   font-size: 14px;   
   width: 200px;  
   position: relative; 
   margin: 100px auto; 
   padding: 2em 1.2em; 
   color: white; 
   background: #58a; 
   background: linear-gradient(-150deg, transparent 1.42em, #58a 0); 
   border-radius: .5em;
}

效果：

被裁了角的背景

接著制作折角

.corner::before{   
   content: ''; 
   position: absolute; 
   top: 0;right: 0; 
   background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0);    
    
   width: 1.64em;  
   height: 2.84em; 

   transform: translateY(-1.2em) rotate(-30deg) ;      
   transform-origin: bottom right;  
   border-bottom-left-radius: inherit;  
   box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.2);
}

看了怪難受吧，我們還是整理一下思路
1.首先制造被裁剪的效果，這在我的CSS SECRETS的第3-4一節(jié)中有提及過

background: linear-gradient(-150deg, transparent 1.42em, #58a 0); 

這里的1.42em要說明一下 ，我們將其設(shè)置為x,并以此為基準(zhǔn)

小小的計(jì)算

2.第二步，我們來做一個(gè)折角
首先確定折角寬 高（即background-size）
根據(jù)上圖的理解，我們?cè)O(shè)置其寬為1.64em,高為2.84em

是不是納悶了？好像反了吧？！嗯

寬為2.84em,高為1.64em

這樣呢？！如果大家親自折一下，會(huì)發(fā)現(xiàn)其中出了點(diǎn)差錯(cuò)。

這里作者很巧妙運(yùn)用了一點(diǎn)數(shù)學(xué)知識(shí)，將寬高交換

寬為1.64em,高為2.84em

這里很重要的一點(diǎn)，我們確定以剪角右下角為旋轉(zhuǎn)原點(diǎn)
所以我們先向上移動(dòng)到原點(diǎn)，再旋轉(zhuǎn)-30deg

向上移動(dòng)的距離計(jì)算

這里我們向上的距離為 y-x
之后旋轉(zhuǎn)-30deg
我們需要注意要先移動(dòng)再旋轉(zhuǎn)

折角效果

3.為折角加上一點(diǎn)陰影

添加陰影

我們?cè)?-1視覺效果 陰影篇中提到做相鄰兩邊的陰影

box-shadow: -.2em .2em .3em -.1em rgba(255,0,0,.2);

效果

完整的折角效果

總結(jié)：第四篇視覺效果結(jié)束了，雖然很酷，但是效果不可濫用，我們可以在一些小細(xì)節(jié)上采用這些效果。此時(shí)我們也可以大開腦洞，去想那些令人驚嘆的效果，因?yàn)镃SS3已經(jīng)足夠強(qiáng)大了！