形状

一 自适应的椭圆

1.难题
1> 圆
你可能注意到过, 给任何正方形元素设置一个足够大的border-radius,
就可以把它变成一个圆形。所用到的CSS 代码如下所示:



1 #bd {
2     width: 200px;
3     height: 200px;
4     background: #fb3;
5     border-radius: 100px; /* >= 正方形边长的一半 */
6 }



 

*当任意两个相邻圆角的半径之和超过border box 的尺寸时,用户
代理必须按比例减小各个边框半径所使用的值,直到它们不会相互重叠
为止

2> 椭圆
如果它的宽高相等,就显示为一个圆;如果宽
高不等,就显示为一个椭圆

2.解决方案
说到border-radius,有一个鲜为人知的真相:它可以单独指定水平
和垂直半径,只要用一个斜杠(/)分隔这两个值即可。这个特性允许我
们在拐角处创建椭圆圆角

因此,如果我们有一个尺寸为
200px × 150px 的元素,就可以把它圆角的两个半径值分别指定为元素宽高的
一半,从而得到一个精确的椭圆:



#bd {
    width:200px;
    height:100px;
    border-radius:100px/50px;
}



但是,这段代码存在一个很大的缺陷:只要元素的尺寸发生变化,
border-radius 的值就得跟着改。我们在图3-5 中可以看到,当元素的尺寸
变为200px×300px 时,如果border-radius 没有跟着改变,会发生什么后
果。因此,如果我们的元素尺寸会随着它的内容变化而变化,这就是一个问
题了。

它不仅可以接受长度值,还可以接受百分比值
这个百分比值会基于元素的尺寸进行解析,即宽度用于水平半径的解析,而高度
用于垂直半径的解析。这意味着相同的百分比可能会计算出不同的水平和垂
直半径。



#bd {
    border-radius:50%;
}



 

3.半椭圆
我们甚至可以为所有四个角提供完全不同的水平和垂
直半径,方法是在斜杠前指定1~4 个值,在斜杠后指定另外1~4 个值。请注
意这两组值是单独展开为四个值的。举例来说,当border-radius 的值为
10px / 5px 20px 时,其效果相当于10px 10px 10px 10px / 5px 20px
5px 20px。



#bd {
    border-radius:50%/100% 100% 0 0;
}



 

半椭圆是可以变成半圆的,只要它的宽度刚好伸展到高度的两倍(或者对一个沿纵轴劈开的
椭圆来说,是高度伸展为宽度的两倍

4.四分之一椭圆
要创建一个四分之一椭圆,其中一个角的水平和垂直半径值都需要是
100%,而其他三个角都不能设为圆角。



#bd {
    border-radius:100% 0 0 0;
}



 

二 平行四边形

1.难题
使用skew()来进行斜向拉伸实现 平行四边形
一个参数时:表示水平方向的倾斜角度
两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度



#box {
    transform:skew(-45deg);
}



 

但是,这导致它的内容也发生了斜向变形,这很不好看,而且难读。
有没有办法只让容器的形状倾斜,而保持其内容不变呢?

2.且套元素方案
我们可以对内容再应用一次反向的skew() 变形,从而抵消容器的变形
效果,最终产生我们所期望的结果。



<a href="#yolo" class="button">
<div>Click me</div>
</a>
<style>
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }
</style>



 

3.伪元素方案
另一种思路是把所有样式(背景、边框等)应用到伪元素上,然后再对
伪元素进行变形。因为我们的内容并不是包含在伪元素里的,所以内容并不
会受到变形的影响。下面来看看这个技巧能否得到与前面相同的链接样式。
此时,用伪元素生成的方块是重叠在内容之上 可以给伪元素设置z-index: -1 样式



.button {
    width:200px;
    height:200px;
    position: relative;
    /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
    content: ''; /* 用伪元素来生成一个矩形 */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width:inherit;
    height:inherit;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}



 

三 棱形图片

1.难题
使用rotate()

2.基于变形的方案
需要把图片用一个<div> 包裹起来,然后对其应用相反的rotate()
变形样式:



<div class="picture">
<img src="adam-catlace.jpg" alt="..." />
</div>



 



.picture {
    width: 400px;
    transform: rotate(45deg);
    overflow: hidden;
}
.picture > img {
    max-width: 100%;
    transform: rotate(-45deg);
}



 

以上产生一个 八角形 的图片 并没有产生棱形

可以使用scale()解决:



.picture {
    width: 400px;
    transform: rotate(45deg);
    overflow: hidden;
}
.picture > img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
}



 

3.裁切路径方案
上面的方法确实可以奏效,但它基本上是一个hack。这个方法需要一层
额外的HTML 标签,这不够简洁;代码本身也不够直观;它甚至还不够健
壮——如果我们碰巧要处理一张非正方形的图片,这个小把戏就会原形毕露

事实上,我们还有一个更好的办法来完成这个任务。它的主要思路是
使用clip-path 属性。

裁切路径允许我们把元素裁剪为我们想要的任何形状。在这个例子
中,我们将会使用polygon()(多边形)函数来指定一个菱形。实际上,它
允许我们用一系列(以逗号分隔的)坐标点来指定任意的多边形。我们甚至
可以使用百分比值,它们会解析为元素自身的尺寸。代码如下所示:



-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);



 

四 切角效果

1.难题

2.解决方案
1> 利用渐变
右下角:



#box {
    background: #58a;
    background:
    linear-gradient(-45deg, transparent 15px, #58a 0);
}



 

四角:



#box {
    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;
}



 

3.弧形切角
可以用来创建弧形切角(很多人也把这种
效果称为“内凹圆角”,因为它看起来就像是圆角的反向版本)。唯一的区别
在于,我们会用径向渐变来替代上述线性渐变:



#box {
    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;
}



 

五 梯形标签页

1.难点
一直以来,梯形
都是众所周知难以用CSS 生成的形状,

2.解决方案



transform: perspective(.5em) rotateX(5deg);



 

整个元素应用3D 变形的,因此它上面的文字也变形了。对元素使用了3D
变形之后,其内部的变形效应是“不可逆转”的,这一点跟2D 变形不同
(在2D 变形的体系之下,内部的逆向变形可以抵消外部的变形效应)
唯一可行的途径就是把变形效果作用在伪元
素上。



.tab {
    position: relative;
    display: inline-block;
    padding: .5em 1em .35em;
    color: white;
}
.tab::before {
    content: ''; /* 用伪元素来生成一个矩形 */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: perspective(.5em) rotateX(5deg);
}