css技巧——形状

自适应的椭圆

如果高宽相等，则显示为圆，不相等则根据比例显示为椭圆

border-radius可以更改边框的四角弧度，它还可以单独指定水平和垂直半径，假设有一个宽高为200px/150px的元素，那么把它圆角的两个半径值设为宽高的一半就可以得到一个椭圆

border-radius: 100px / 75px;

但这有个弊端，如果元素尺寸发生变化，半径也要改变才能维持形状，好在天无绝人之路，border-radius还可以接受百分比的值

border-radius: 50% / 50%;

这样就可以得到一个自适应的椭圆了

半椭圆

border-radius能接受四个方向的值，顺着这条思路，可以很轻松生成自适应的半椭圆

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

四分之一椭圆

一个角的水平垂直半径都为100%，其它三个角都不能设为圆角

border-radius:100% 0 0 0;

平行四边形

直接使用transform: skew()属性

.box {
            width: 100px;
            height: 50px;
            background: yellowgreen;
            transform: skew(-45deg);
        }

但这样一来内容也发生了倾斜，虽然可以通过对内容再进行一次反向的skew()变形,但这意味着还需要一层额外的html元素来包裹内容，可以采用伪元素解决方案

  .box {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            position: relative;
        }
        .box::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;/* 伪元素处于内容上，需要降级 */
            background: yellowgreen;
            transform: skew(-45deg);
        }

这种方式变形的是伪元素，所以不会影响到宿主元素的内容，这个技巧适用于其它任何变形样式，想变形一个元素又不想它的内容受影响时都可以用上

切角效果

想要实现这种效果需要用到css渐变

     .box {
            width: 100px;
            height: 50px;
            background-color: #58a;
            background:linear-gradient(-45deg, transparent 15px, #58a 0)
        }

这里就裁切掉了一个角，原理就是把需要“裁切”掉的一角变成透明，在视觉上就被切掉了，以下是照葫芦画瓢裁掉四个角

 .box {
            width: 200px;
            height: 200px;
            background-color: #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;
        }

这里需要用到background-repeat: no-repeat;，否则每层渐变图案都会进行平铺，然后会互相覆盖，弧形切角也是一个道理，把linear-gradient()换成radial-gradient()

 .box {
            width: 200px;
            height: 200px;
            background-color: #58a;
            background:radial-gradient(circle at top left,transparent 30px,#58a 0) top left,
            radial-gradient(circle at top right,transparent 30px,#58a 0) top right,
            radial-gradient(circle at bottom left,transparent 30px,#58a 0)bottom left,
            radial-gradient(circle at bottom right,transparent 30px,#58a 0) bottom right;
            background-size: 50% 50%;
            background-repeat: no-repeat;
        }

未完待续.....