CSS3 旋转的四角形

使用圆弧形叠加在方形上形成的四角形。

CSS3

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2041
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-color: #000;
    margin: 0;
}
.squarebox {
    position: fixed;
    top: 40%;
    left: 45%;
    margin-top: -50px;
    margin-left: -100px;
}
.square {
    position: relative;
    top: 9px;
    left: 9px;
    height: 50px;
    width: 50px;
    background-color: black;
    border: 2px solid #37cfcb;
    margin: 1px;
    float: left;
}
.squarecut {
    position: relative;
    top: -2px;
    left: -2px;
    height: 54px;
    width: 54px;
    background-color: #000;
    border-radius: 15px;
}
.square:nth-child(n) {
    transform: rotate(90deg);
    animation-name: example1;
    animation-duration: 4s;
    transition: 1s linear ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes example1 {
    0% {
        transform: rotate(0deg)
    }
    ;
    25% {
        transform: rotate(20deg)
    }
    ;
    50% {
        transform: rotate(40deg)
    }
    ;
    75% {
        transform: rotate(60deg)
    }
    ;
    100% {
        transform: rotate(90deg)
    }
    ;
}

HTML

使用圆弧形叠加在方形上形成的四角形。

CSS3

编辑器支持Emmet

快捷键

使用圆弧形叠加在方形上形成的四角形。

CSS3

CSS3 旋转的三角形

CSS3 旋转的六边形线条

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：