03--css形状--css揭秘

形状

一 自适应的椭圆

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

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

 

*当任意两个相邻圆角的半径之和超过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);
}