css如何使用transform: rotate配合overflow: hidden繪制三角形

這篇文章給大家分享的是有關(guān)css如何使用transform: rotate配合overflow: hidden繪制三角形的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

transform: rotate 配合 overflow: hidden 繪制三角形

這種方法還是比較常規(guī)的，使用 transform: rotate 配合 overflow: hidden。一看就懂，一學(xué)就會(huì)，簡(jiǎn)單的動(dòng)畫(huà)示意圖如下：

設(shè)置圖形的旋轉(zhuǎn)中心在左下角 left bottom，進(jìn)行旋轉(zhuǎn)，配合 overflow: hidden。

完整的代碼：

<div class="demo"></div>
<div class="demo-opacity"></div>
<div class="triangle"></div>

html, body {
    width: 100%;
    height: 100%;
    display: flex;
}

div {
    width: 141px;
    height: 100px;
    margin: auto;
}

.demo-opacity {
    overflow: hidden;
}

.demo,
.demo-opacity {
    position: relative;
    border: 1px solid #000;
    background: unset;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        animation: conicmove 3s infinite linear;
        background: deeppink;
        transform-origin: left bottom;
        z-index: -1;
    }
}

.triangle {
    position: relative;
    background: unset;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: deeppink;
        transform-origin: left bottom;
        transform: rotate(45deg);
        z-index: -1;
    }
}

@keyframes conicmove {
    100% {
        transform: rotate(45deg);
    }
}

感謝各位的閱讀！關(guān)于“css如何使用transform: rotate配合overflow: hidden繪制三角形”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！