一, 直切角效果
示例:
- <style type="text/CSS">
- body{
- margin: 0;
- font-size: 16px;
- padding: 20px;
- }
- .child{
- height: 130px;
- width: 200px;
- background: linear-gradient(135deg,transparent 15px, #6fbef3 0) top left,
- linear-gradient(-135deg,transparent 15px, #6fbef3 0) top right,
- linear-gradient(-45deg,transparent 15px, #6fbef3 0) bottom right,
- linear-gradient(45deg,transparent 15px, #6fbef3 0) bottom left;
- background-size: 50% 50%;
- background-repeat: no-repeat;
- }
- </style>
- <div class='child'> </div>
知识点: 这里利用渐变背景填充, 设置渐变角度, 把透明色放在切角处, 然后在相同位置设置另一个色标. 四个切角需要四层渐变, 默认情况下背景会填满整个元素, 所以需要 background-size 让它们各自占据元素的四分之一.
二, 内凹切角
示例:
- <style type="text/css">
- body{
- margin: 0;
- font-size: 16px;
- padding: 20px;
- }
- .child{
- height: 130px;
- width: 200px;
- background: #58a;
- background:
- radial-gradient(circle at top left,
- transparent 15px, #6fbef3 0) top left,
- radial-gradient(circle at top right,
- transparent 15px, #6fbef3 0) top right,
- radial-gradient(circle at bottom right,
- transparent 15px, #6fbef3 0) bottom right,
- radial-gradient(circle at bottom left,
- transparent 15px, #6fbef3 0) bottom left;
- background-size: 50% 50%;
- background-repeat: no-repeat;
- }
- </style>
- <div class='child'> </div>
三, 不规则投影
示例:
- <style type="text/css">
- body{
- margin: 0;
- font-size: 16px;
- padding: 20px;
- }
- body div{
- height: 100px;
- width: 180px;
- float: left;
- margin-right: 20px;
- filter: drop-shadow(2px 2px 3px rgba(0,0,0,.5));
- }
- .child1{
- background: linear-gradient(135deg,transparent 15px, #6fbef3 0) top left,
- linear-gradient(-135deg,transparent 15px, #6fbef3 0) top right,
- linear-gradient(-45deg,transparent 15px, #6fbef3 0) bottom right,
- linear-gradient(45deg,transparent 15px, #6fbef3 0) bottom left;
- background-size: 50% 50%;
- background-repeat: no-repeat;
- }
- .child2{
- border:8px dotted #6fbef3;
- }
- .child3{
- position: relative;
- background-color: #6fbef3;
- }
- .child3:before{
- content: '';
- position: absolute;
- padding: 10px;
- right: -10px;
- top: 35px;
- background: inherit;
- border-right: 0;
- border-bottom: 0;
- transform: rotate(45deg);
- }
- </style>
- <div class='child1'> </div>
- <div class='child2'> 文本 文本文本文本 </div>
- <div class='child3'> </div>
知识点: 使用滤镜 filter,drop-shadow() 滤镜函数可接受的参数基本上和 box-shadow 一致.
注: 任何非透明的部分都会被打上投影, 包括文本.
来源: http://www.qdfuns.com/article/46690/8f667600ae585c32b2c536245217569d.html