你该知道的《css揭秘》--形状,切角篇

829 阅读8分钟

转自你该知道的《css揭秘》--形状篇

关于以下内容,我们假设结构层的变更是不允许的。

我们也尽量不去添加额外的HTML,以做到样式层与结构层的分离,如若实在没有其他的可能性,才退而求其次来增加额外的HTML。

自适应椭圆

制作一个自适应的椭圆是形状篇中最简单的图形了,简直不能再简单了。

众所周知,制作与圆相关的图形,用到的属性就要 border-radius 了。我们知道,border-radius可以单独指定水平和垂直半径,使用斜杠 (/) 来分开,两个值相等可以制作一个圆弧,如果不相等,便是一个椭圆弧了。

.demo{
    border-radius: 100px / 75px;
}
复制代码

其实border-radius是一个简写属性,我们有两种方式可以为元素的每个角指定不同的值。

第一种简写方式

.demo{
   border-radius:10px 20px 30px 40px / 50px 60px 70px 80px;
   /* 斜杠(/)前代表水平半径,后代表垂直半径,顺序分别为左上角开始,顺时针走向,所以这段代码表示左上角(10px/50px) 右上角(20px/60px)右下角(30px/70px)左下角(40px/80px) */
}
复制代码

第二种是分开写的方式

.demo{
    border-top-left-radius:10px/50px;
    border-top-right-radius:20px/60px;
    border-bottom-right-radius:30px/70px;
    border-bottom-left-radius:40px/80px;
}
复制代码

如果生成一个自适应的椭圆就很简单了,只要每个角的水平半径为宽的50%,垂直半径为高的50%,就ok了。 代码简写为:

.ellipse{
    border-radius:50%;
}
复制代码

平行四边形

平行四边形也是页面中常出现的一种图形,我们可能很容易就想到,使用skew()将矩形倾斜一定角度即可。

.parallelograms{
    transform: skew(-45deg);
    /*...... */
}
复制代码

可惜效果不如人意,文字也跟着倾斜了,这时候很容易想到,借助一层dom结构,再把内部文字倾斜回来。

<div class="parallelograms">
    <div>二十首情诗与绝望的歌</div>
</div>
复制代码
 .parallelograms{
    margin: 50px auto;
    max-width: 200px;
    padding: 10px;
    line-height: 30px;
    text-align: center;
    color:#fff;
    background-color: #58a;
    transform:skew(-45deg);
}
.parallelograms div{
    transform: skew(45deg);
}
复制代码

很好,效果不错,但是却添加额外的 HTML 元素。我们不做过多讨论。

接下来我们讨论第二种方式,使用 伪元素来实现,这时候就体现了伪元素的好处。 关于伪元素的内容可参考我的另一边文章你所不知道的css

思路:我们可以把伪元素作为第一种方法中的辅助结构层,把所有样式(背景、边框等)应用到伪元素上,然后再对伪元素进行变形,得到我们的平行四边形形状,而正式内容不受影响,然后把伪元素定位z-index设为-1,便可漏出正文的内容。


 .parallelograms{
    margin: 50px auto;
    max-width: 200px;
    padding: 10px;
    line-height: 30px;
    text-align: center;
    color:#fff;
    position: relative;
}
.parallelograms:before{
    content:'';
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color: #58a;
    transform:skew(-45deg);
    z-index: -1;
}
复制代码

提醒: 这个技巧不仅对 skew() 变形来说很有用,还适用于其他任何变形样式, 当我们想变形一个元素而不想变形它的内容时就可以用到它。

菱形图片

看到这个图形状,是不是马上想起上一小节平行四边形的制作,一样的道理,需要把图片用一个

包裹起来,然后对其应用相反的 rotate() 变形样式:

<div class="diamond">
    <img src="https://avatars1.githubusercontent.com/u/8121621?v=4" alt="..." />
</div>
复制代码
.diamond {
    margin:30px auto;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    overflow: hidden;
    border: 1px solid red; /*为了更好的展示问题*/
}

.diamond img { max-width: 100%; transform: rotate(-45deg); }

复制代码

奈何,天不遂人愿!问题在于 max-width:100% 中的100%是指width的100%,也就是400px,而正方形旋转后最长边为对角线,是 根号2倍的width,自然图片的宽度不够了,我们可以使用 scale() 变形样式来把这个图片放大。找到问题后,我们修复它,

代码如下:

.diamond {
    margin:30px auto;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    overflow: hidden;
    border: 1px solid red; /*为了更好的展示问题*/
}

.diamond img { max-width: 100%; transform: rotate(-45deg) scale(1.42); } 复制代码

这个方法需要一层额外的 HTML 标签,这是我们不做优先考虑的。同时有一个最大的问题就是,只能处理正方形图片,否则就会失效。

在上节中我们使用过伪元素的技巧,同样可以用在这里,代码如下:

 .diamond{
    margin:30px auto;
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    transform: rotate(45deg);
}
.diamond:before{
    content:'';
    position: absolute;
    left: 0;
    right:0;
    top:0;
    bottom:0;
    transform: rotate(-45deg) scale(1.42);
    background: url(https://avatars1.githubusercontent.com/u/8121621?v=4);
    background-size: cover;
}
复制代码

原理与上面借助结构层是一样的,所以面临同样的问题,只能处理正方形图片。

接下来我们使用一种更为好用的方法来解决不是正方形的图片。(裁切路径方案)

抛出代码:

.diamond{
    /*......*/
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
复制代码

clip-path 属性是从svg中借鉴过来的,裁切路径允许我们把元素裁剪为我们想要的任何形状。polygon()函数允许我们用一系列(以逗号分隔的)坐标点来指定任意的多边形。

该方法同样可以实现上个章节中的平行四边形,以下章节中的切角、梯形等等任意形状,只需要按顺序排列坐标点即可,以下章节不再做过多展示,自己可以多多尝试。

切角效果

切角效果,很容易想到的就是我的上篇文章 你该知道的《css揭秘》--背景与边框篇 中的条纹背景制作中用到的线性渐变 linear-gradient()

我们很轻易的可以实现一个角被切掉的效果,代码如下:

.bevel-corners{
    background: #58a; /*linear-gradient不支持的情况下,作为代码回退机制*/ 
    background:linear-gradient(-45deg, transparent 15px, #58a 0);
}
复制代码

接下来使用两层渐变背景实现两个角被切掉。

首先分析一下,默认情况下, 这两层渐变都会填满整个元素,因此它们会相互覆盖。需要让它们都缩小一些,于是我们使用 background-size 让每层渐变分别只占据整个元素一半的面积,并且background-repeat设为no-repeat

代码如下:

.bevel-corners{
    background: #58a;
    background:
    linear-gradient(-45deg, transparent 15px, #58a 0) right,
    linear-gradient(45deg, transparent 15px, #58a 0) left;
    background-size:50% 100%;
    background-repeat:no-repeat;
}
复制代码

同样的原理,我们把每层渐变改为整个元素的四分之一,则四层渐变色,可以实现四个角被切掉。

代码如下:

.bevel-corners{
    background:#58a;
    background:
    linear-gradient(-45deg,transparent 15px, #58a 0) bottom right,
    linear-gradient(45deg,transparent 15px, #58a 0) bottom left,
    linear-gradient(135deg,transparent 15px, #58a 0) top left,
    linear-gradient(-135deg,transparent 15px, #58a 0) top right;
    background-size:50% 50%;
    background-repeat:no-repeat;
}
复制代码

继续增加难度,实现 弧形切角, 原理都一样,换汤不换药,只需将线性渐变改为径向渐变即可。

实现代码如下:

.scoop-corners{
    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;
}
复制代码

简单的饼图

实现最后一个图形--饼图(绿色为饼图,棕色来显示比率)

基于 transform 的解决方案

思路:把圆形的左右两部分指定为上述两种颜色,然后用伪元素覆盖上去,通过旋转来 决定露出多大的扇区。

20%的饼图代码如下:

.pie {
    width: 100px; 
    height: 100px;
    border-radius: 50%; 
    background: yellowgreen;
    background-image:linear-gradient(90deg, transparent 50%, #655 0);
}
.pie:before { 
    content: '';
    display: block; 
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%; 
    background-color: inherit; 
    transform-origin: left;
    transform: rotate(.2turn);
}
复制代码

当旋转超过50%之后,饼图就变成了下图这样,

然后我们可以让旋转的伪元素的颜色反一下,变成棕色既可以实现50%-100%比率的饼图,

60%的饼图代码如下:

.pie:before { 
    content: '';
    display: block; 
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%; 
    background-color: #655; 
    transform-origin: left;
    transform: rotate(.1turn);
}

复制代码

如果本文有帮到你,不妨给点个赞👍,我会更加有动力创作!