1.自适应椭圆
思路：border-radius可以单独指定水平和垂直半径，用百分比来表示
div {
width:16em;
height:10em;
background:#fb3;
border-radius:50%;
}
Paste_Image.png
半椭圆
思路：border-radius可以从左上角开始顺时针设置四个角的值
div {
width:16em;
height:10em;
background:#fb3;
border-radius:50% / 100% 100% 0 0;//水平全部为 50% ,垂直方向依次为100% 100% 0 0
}
Paste_Image.png
div {
width:16em;
height:10em;
background:#fb3;
border-radius:100% 0 0 100% / 50%;
}
Paste_Image.png
四分之一椭圆
div {
width:16em;
height:10em;
background:#fb3;
border-radius:100% 0 0 0;
}
Paste_Image.png
2.平行四边形
要求：容器变形，内容保持垂直
嵌套元素方案
思路：对内容再次应用skew()变形，从而抵消容器的变形效果
<a href="#yolo" class="button"><div>Click me</div></a>
<button class="button"><div>Click me</div></button>
.button {transform:skewX(45deg);}
.button > div {transform:skewX(-45deg);}
.button {
display:inline-block;
padding:.5em 1em;
border:0;margin:.5em;
background:#58a;
color:white;
text-transform:uppercase;
text-decoration:none;
font:bold 200%/1sans-serif;
}
Paste_Image.png
伪元素方案
思路：把所有样式应用到伪元素上，然后对伪元素进行变形
为宿主元素设置position:relative;伪元素设置position:absolute;让伪元素自动继承宿主元素的属性。
Paste_Image.png
<a href="#yolo" class="button"><div>Click me</div></a>
<button class="button"><div>Click me</div></button>
.button {
position:relative;
/*其他文字、边距样式*/
}
.button::before {
content:'';/* To generate the box */
position:absolute;
top:0;right:0;bottom:0;left:0;/*设置偏移量为0，让伪元素拉伸到宿主尺寸*/
z-index:-1;/*图层放在内容之下*/
background:#58a;
transform:skew(45deg); /*伪元素变形*/
}
3.菱形图片
基于变形的方案
思路：容器先转45度，内容再反转回来。同时放大补充出现的空白区。
用scale(1.42)对图片进行放大是以图片原点为中心的放大。
width的放大是基于左上角的放大。
.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;
}
Paste_Image.png
裁切路径方案
变形方案对于非正方形图片有局限性，因此应用clip-path属性，进行裁剪，可以实现不同形状。
/**
* 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%);
}
Paste_Image.png
img {
max-width:250px;
margin:20px;
-webkit-clip-path:polygon(10% 0,
50% 50%, 50% 100%, 100% 50%);
clip-path:polygon(10% 0,
50% 50%, 50% 100%, 100% 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%);
}
Paste_Image.png
4.切角效果
渐变色方案
直角切角
思路：应用渐变。
注意：为防止相互覆盖，大小要限定，并且取消重复。
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;
}
Paste_Image.png
弧形切角
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;
}
Paste_Image.png
内联SVG与border-image方案
原理：应用border-image的切片填充原理。
div {
border:21px solid transparent;
border-image:1 /*这里的1是SVG文件的坐标系统，不需要单位*/
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;
}
Paste_Image.png
裁切路径方案
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;
}
5.梯形标签页
思路：采用3D旋转实现效果，把变形效果作用在伪元素上。
关键语句
rotateX(angle)
定义沿着 X 轴的3D 旋转。
Paste_Image.png
transform: perspective(.5em) rotateX(5ged);//变换
transform: scaleY(1.3); //修正Y方向的缩水
transform-origin: bottom;//防止图像位置下移
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;
}
Paste_Image.png
当
transform-origin: bottom left;
Paste_Image.png
当transform-origin:bottom right;
Paste_Image.png
6.简单的饼图
圆
.pie {
width:100px;height:100px;
border-radius:50%;
background:yellowgreen;
background-image:linear-gradient(to right, transparent 50%, currentColor 0);//把绿色圆的右半部分弄成棕色
color:#655;
}
Paste_Image.png
.pie::before {//设置伪元素的样式，绿色半圆
content:'';
display:block;
margin-left:50%;
height:100%;
border-radius:0 100% 100% 0 / 50%;
background-color:inherit;//继承了绿色
transform-origin:left; //旋转中心为圆心
animation:spin3s linear infinite, bg 6s step-end infinite;
}
@keyframes spin{
to {transform:rotate(.5turn);}//当小于.5turn时，可以直接旋转伪元素
}
@keyframes bg{
50% {background:currentColor;}//当大于.5turn时，改变伪元素的背景色
}
Paste_Image.png
Paste_Image.png
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:grow2s infinite linear;
}
本文整理自《CSS揭秘》
网友评论