4-3 视觉效果 折角效果

知识储备

1.linear-gradient()渐变效果（这个属性真的越用越喜欢）
2 transform 中的translate和rotate效果

小测试

先来看看效果，是否会大吃一惊呢？！

逼真的折角效果

这里请原谅一下chrome的渲染真的很糙

示例代码：
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>

做好准备，又开始抛代码了
这里是给整个容器设置背景（被裁了一角的背景）
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一节中有提及过

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

这里的1.42em要说明一下 ，我们将其设置为x,并以此为基准

小小的计算

2.第二步，我们来做一个折角
首先确定折角宽 高（即background-size）
根据上图的理解，我们设置其宽为1.64em,高为2.84em

是不是纳闷了？好像反了吧？！嗯

宽为2.84em,高为1.64em

这样呢？！如果大家亲自折一下，会发现其中出了点差错。

这里作者很巧妙运用了一点数学知识，将宽高交换

宽为1.64em,高为2.84em

这里很重要的一点，我们确定以剪角右下角为旋转原点
所以我们先向上移动到原点，再旋转-30deg

向上移动的距离计算

这里我们向上的距离为 y-x
之后旋转-30deg
我们需要注意要先移动再旋转

折角效果

3.为折角加上一点阴影

添加阴影

我们在4-1视觉效果 阴影篇中提到做相邻两边的阴影

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

效果

完整的折角效果

总结：第四篇视觉效果结束了，虽然很酷，但是效果不可滥用，我们可以在一些小细节上采用这些效果。此时我们也可以大开脑洞，去想那些令人惊叹的效果，因为CSS3已经足够强大了！