跳到主要内容

形状

自适应的椭圆​

椭圆​

.oval {
    /* 水平半径 / 垂直半径 */
    border-radius: 50% / 50%;
}

半椭圆​

.half-oval {
    border-radius: 100% 0 0 100% / 50%;
}

四分之一椭圆​

.quarter-oval {
    border-radius: 100% 0 0 0;
}

平行四边形​

Hello
<div class="css-secret-3-basic parallel">Hello</div>
.parallel {
    transform: skewX(-20deg);
}

矫正内部变形​

Hello
<div class="css-secret-3-basic parallel-1"><div>Hello</div></div>
.parallel-1 {
    transform: skewX(-20deg);
}

.parallel-1 > div {
    transform: skewX(20deg);
}

用伪类矫正​

Hello
<div class="css-secret-3-basic parallel-2">Hello</div>
.parallel-2 {
    position: relative;
}

.parallel-2::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #f5bcbc;
    transform: skew(-20deg);
}

切角效果​

.cut-corner {
    background: linear-gradient(-45deg, transparent 15px, #f5bcbc 0);
}

应用到四个角​

.cut-all-corner {
    background: linear-gradient(135deg, transparent 15px, #f5bcbc 0) top left, linear-gradient(
                -135deg,
                transparent 15px,
                #f5bcbc 0
            ) top right,
        linear-gradient(-45deg, transparent 15px, #f5bcbc 0) bottom right, linear-gradient(
                45deg,
                transparent 15px,
                #f5bcbc 0
            ) bottom left;
    background-size: 51% 51%; /* 理论 50% 是够的 */
    background-repeat: no-repeat;
}

参考​