Rotate + Clip

by redky

HTML

<div class="box"></div>

CSS

.box {
    width: 100px;
    height: 100px;
    background-color: #faa;
    transform: rotate(45deg);
    margin: 100px;
    position: relative;
    overflow: hidden;
}

.box:after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background-color: #e1e1e1;
    transform: rotate(-45deg);
}

JavaScript

// position: relative + overflow: hidden;
// 还是搞不定子元素的 position: fixed

// clip 方向也会同时被 rotate