css揭秘笔记——形状

自适应的椭圆（border-radius的用法）

单独指定水平和垂直半径

长宽固定的元素，可以通过指定宽高的一半，变为椭圆形，格式为两个值用/分开。

width: 100px; 
height: 80px; 
border-radius: 50px/40px;
background: orange;

效果如下：

百分比值

宽高不固定的元素，还可以通过指定百分比值来实现自适应椭圆的效果。

 border-radius: 50%/50%;
 

还可以简写为

border-radius: 50%;

### 为每个角指定不同的值

border-radius的展开属性为：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

也可以直接简写：
border-radius： [top-left-horizon] [top-right-horizon] [bottom-right-horizon] [bottom-left-horizon] / [top-left-vertical] [top-right-vertical] [bottom-right-vertical] [bottom-left-vertical]

当然，各个值也可以省略，1~4个均可，会以CSS常规方法重复。

利用这个特性，就可以实现半个椭圆或四分之一个椭圆的效果。

border-radius:50%/ 100% 100% 0 0;

border-radius:100% 0 0 100%/ 50%;

border-radius:100% 0 0;

平行四边形

形变，用transform: skewX(-45deg)，可以得到平行四边形，但是，元素中的字体也会跟着形变，就像这样：

添加一个标签，使用嵌套的方案，并不是很好的方法。

可以选择伪元素的方式：

.button{
    position: relative;
    
}
.button::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: orange;
    transform: skewX(-45deg);
    z-index: -1;
}

这种方法，可以应用在想变形一个元素而不想变形它的内容的场景。

把skew改成rotate，就变成了这样：

实现边框内圆角

.inner-radius{
    position: relative;
    border-radius: 20px;
    background: white;
}
.inner-radius::before{
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    background: orange;
    z-index: -1;
}

多重边框

.borders{
    position: relative;
    border: 2px dashed orange;
}
.borders::before{
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    border: 2px dashed green;
    z-index: -1;
}

还有IE8下实现多重背景、为某一层“背景”单独设置类似opacity这样的属性等等。

菱形图片

基于变形的方案

<div class="picture">
    <img src="./image/girl.jpg" alt="girl">
</div>

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

但是这种方法需要一个多余的div，并且对正方形的图片比较适用。下面的方法非常适应非正方形的图片。

基于裁切路径方案

/*直接在img元素上应用该属性，将图片裁切成想要的样子，用多边形函数polygon()指定一个菱形*/
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); 

还可以将clip-path参与到过渡动画。（动画需要在同一种形状函数，并且点相同）

.clip-img{
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); 
    transition: 1s clip-path;
}
.clip-img:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

这样就有了鼠标悬停时，图片扩展为原来的形状和大小。

切角效果

直切角

background: 
    linear-gradient(45deg, transparent 15px, orange 0) left bottom,
    linear-gradient(-45deg, transparent 15px, orange 0) right bottom,
    linear-gradient(135deg, transparent 15px, orange 0) left top,
    linear-gradient(-135deg, transparent 15px, orange 0) right top;
background-size: 50% 50%;
background-repeat: no-repeat;

注意，这个角度让我一度很困惑，它是这样的：

参考： 张鑫旭-深入理解CSS3 gradient斜向线性渐变

弧形切角

把线性渐变改为径向渐变，就变成了内凹圆角。

background: 
    radial-gradient(circle at left bottom, transparent 15px, orange 0) left bottom,
    radial-gradient(circle at right bottom, transparent 15px, orange 0) right bottom,
    radial-gradient(circle at left top, transparent 15px, orange 0) left top,
    radial-gradient(circle at right top, transparent 15px, orange 0) right top;
background-size: 50% 50%;
background-repeat: no-repeat;

裁切路径方案

background: orange;
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，戳这里

梯形标签

使用3D形变，以x轴旋转，形成梯形的效果。为了避免标签中的字体也变形，还使用“平行四边形”实现方式（伪元素）。

.tab{
    position: relative;
    text-align: center;
    line-height: 30px;
}
.tab::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform-origin: bottom; /*以元素底边旋转，底边和原元素底部等长。（默认以中轴线旋转，元素大小容易不受控制）*/
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg); /*旋转后，比原元素矮了，在Y轴方向上拉伸至原来的长度。（尽量不改变原元素，保证回退后的效果）*/
    background-color: orange;
    z-index: -1;
}

这种方式很容易添加其他样式，如，在伪元素中加入以下样式：

background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0));
border: 1px solid rgba(0,0,0,.4);
border-bottom: none;
border-radius: .5em .5em 0 0;
box-shadow: 0 .15em white inset;

就变成了这个样子：