11-菱形图片
介绍两种使用 css 制作菱形图片的方案，相对于设计师提供裁切好的图片，更加灵活
基于变形的方案
/** * Diamond images — via transforms */ <div class="diamond"> <img src="http://placekitten.com/200/300" /> </div> .diamond { width: 250px; height: 250px; transform: rotate(45deg); overflow: hidden; margin: 100px; } .diamond img { max-width: 100%; transform: rotate(-45deg) scale(1.42); z-index: -1; position: relative; }
裁切路径方案
/** * Diamond images — via clip-path */ img { max-width: 250px; margin: 20px; -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: 1s; } img:hover { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
12-切角效果
背景知识：css 渐变，background-size, '条纹背景'
切角是一种流行的设计风格，使用css 制作切角可以实现更加灵活和多样的颜色效果
渐变方案
<div>Hey, focus! You’re er!</div> /** * Beveled corners — with gradients */ div { background: #58a; background: linear-gradient(135deg, transparent 15px, #58a 0) top left, linear-gradient(-135deg, transparent 15px, #58a 0) top right, linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, linear-gradient(45deg, transparent 15px, #58a 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; padding: 1em 1.2em; max-width: 12em; color: white; font: 150%/1.6 Baskerville, Palatino, serif; }
弧形切角
渐变技巧的一个变种
/** * Scoop corners */ div { background: #58a; background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, radial-gradient(circle at top right, transparent 15px, #58a 0) top right, radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; padding: 1em 1.2em; max-width: 12em; color: white; font: 130%/1.6 Baskerville, Palatino, serif; }
内联 SVG 与 border-image 方案
/** * Beveled corners — with border-image and an inline SVG */ div { border: 21px solid transparent; border-image: 1 url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\ <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2" />\ </svg>'); background: #58a; background-clip: padding-box; padding: .2em .3em; max-width: 12em; color: white; font: 150%/1.6 Baskerville, Palatino, serif; }
裁切路径方案
强烈推荐这种，可以比较方便的制作大量不同颜色的切角图片，只需要改变背景色就好。
/** * Beveled corners — with clip-path */ div { background: #58a; -webkit-clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); padding: 1em 1.2em; max-width: 12em; color: white; font: 150%/1.6 Baskerville, Palatino, serif; }
13-梯形标签页
背景知识：基本的3D变形，“平行四边形”
方案1: 伪元素制作两条斜边，border 制作上下平行边 方案2: 3D 旋转，普通的3D 旋转会有副作用比如 文字的变形
<nav> <a href="#">Home</a> <a href="#" class="selected">Projects</a> <a href="#">About</a> </nav> <main> Content area </main> <nav class="left"> <a href="#">Home</a> <a href="#" class="selected">Projects</a> <a href="#">About</a> </nav> <main> Content area </main> <nav class="right"> <a href="#">Home</a> <a href="#" class="selected">Projects</a> <a href="#">About</a> </nav> <main> Content area </main> /** * Trapezoid tabs */ body { padding: 40px; font: 130%/2 Frutiger LT Std, sans-serif; } nav { position: relative; z-index: 1; padding-left: 1em; } nav > a { position: relative; display: inline-block; padding: .3em 1em 0; color: inherit; text-decoration: none; margin: 0 -.3em; } nav > a::before, main { border: .1em solid rgba(0,0,0,.4); } nav a::before { content: ''; /* To generate the box */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-bottom: none; border-radius: .5em .5em 0 0; background: #ccc linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0)); box-shadow: 0 .15em white inset; transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg); transform-origin: bottom; } nav a.selected { z-index: 2;} nav a.selected::before { background-color: #eee; margin-bottom: -.08em; } main { display: block; margin-bottom: 1em; background: #eee; padding: 1em; border-radius: .15em; } nav.left > a::before { transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg); transform-origin: bottom left; } nav.right { padding-left: 2em; } nav.right > a::before { transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg); transform-origin: bottom right; }
14-简单的饼图
基于transtorm 和 animation
/** * Animated pie chart */ .pie { width: 100px; height: 100px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, currentColor 0); color: #655; } .pie::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; animation: spin 3s linear infinite, bg 6s step-end infinite; } @keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: currentColor; } }
/** * Static pie charts */ .pie { display: inline-block; position: relative; width: 100px; line-height: 100px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, #655 0); color: transparent; text-align: center; } @keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: #655; } } .pie::before { content: ''; position: absolute; top: 0; left: 50%; width: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; animation: spin 50s linear infinite, bg 100s step-end infinite; animation-play-state: paused; animation-delay: inherit; }
SVG 方案
/** * Pie charts — with SVG */ .pie { width: 100px; height: 100px; display: inline-block; margin: 10px; transform: rotate(-90deg); } svg { background: yellowgreen; border-radius: 50%; } circle { fill: yellowgreen; stroke: #655; stroke-width: 32; } @keyframes grow { to { stroke-dasharray: 100 100 } } .pie.animated circle { animation: grow 2s infinite linear; }
15-单侧投影
单侧投影
/** * One-sided shadow */ div { width: 1.6in; height: 1in; background: #fb3; box-shadow: 0 5px 4px -4px black; }
邻边投影
/** * One-sided shadow */ div { width: 1.6in; height: 1in; background: #fb3; box-shadow: 3px 3px 6px -3px black; }
双侧投影
/** * One-sided shadow */ div { width: 1.6in; height: 1in; background: #fb3; box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black; }
