如何使用CSS3构造简单的五角星形状

Pure CSS star shape 构造五角星的原理也比较简单： 1. 首先构造一个三角形元素 2. 再通过伪元素:before和:after复制2个三角形 3. 使用transform: rotate()方法添加旋转角度。

CSS3,教程

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.star.smaller {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 5px;
    border-right-width: 10px;
    border-left-width: 10px;
    height: 0;
    margin-top: 5px;
    margin-bottom: 3.21429px;
    position: relative;
    width: 0;
}
.star.smaller:before,
.star.smaller:after {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 5px;
    border-right-width: 10px;
    border-left-width: 10px;
    content: '';
    display: block;
    height: 0;
    left: -10px;
    position: absolute;
    top: -5px;
    width: 0;
}
.star.smaller:before {
    transform: rotate(70deg);
}
.star.smaller:after {
    transform: rotate(-70deg);
}
.star,
.star.small {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 9.375px;
    border-right-width: 15px;
    border-left-width: 15px;
    height: 0;
    margin-top: 9.375px;
    margin-bottom: 6.02679px;
    position: relative;
    width: 0;
}
.star:before,
.star.small:before,
.star:after,
.star.small:after {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 9.375px;
    border-right-width: 15px;
    border-left-width: 15px;
    content: '';
    display: block;
    height: 0;
    left: -15px;
    position: absolute;
    top: -9.375px;
    width: 0;
}
.star:before,
.star.small:before {
    transform: rotate(70deg);
}
.star:after,
.star.small:after {
    transform: rotate(-70deg);
}
.star.medium {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 16.66667px;
    border-right-width: 25px;
    border-left-width: 25px;
    height: 0;
    margin-top: 16.66667px;
    margin-bottom: 10.71429px;
    position: relative;
    width: 0;
}
.star.medium:before,
.star.medium:after {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 16.66667px;
    border-right-width: 25px;
    border-left-width: 25px;
    content: '';
    display: block;
    height: 0;
    left: -25px;
    position: absolute;
    top: -16.66667px;
    width: 0;
}
.star.medium:before {
    transform: rotate(70deg);
}
.star.medium:after {
    transform: rotate(-70deg);
}
.star.large {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 27.58621px;
    border-right-width: 40px;
    border-left-width: 40px;
    height: 0;
    margin-top: 27.58621px;
    margin-bottom: 17.73399px;
    position: relative;
    width: 0;
}
.star.large:before,
.star.large:after {
    border-color: #fd4 transparent transparent transparent;
    border-style: solid;
    border-top-width: 27.58621px;
    border-right-width: 40px;
    border-left-width: 40px;
    content: '';
    display: block;
    height: 0;
    left: -40px;
    position: absolute;
    top: -27.58621px;
    width: 0;
}
.star.large:before {
    transform: rotate(70deg);
}
.star.large:after {
    transform: rotate(-70deg);
}
html,
body {
    background: #262626;
    text-align: center;
    height: 100%;
    overflow: hidden;
}
html .container,
body .container {
    position: relative;
    top: 50%;
    margin-top: -50px;
}
html .container .star,
body .container .star {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
}

HTML

Pure CSS star shape 构造五角星的原理也比较简单： 1. 首先构造一个三角形元素 2. 再通过伪元素:before和:after复制2个三角形 3. 使用transform: rotate()方法添加旋转角度。

CSS3,教程

编辑器支持Emmet

快捷键

Pure CSS star shape 构造五角星的原理也比较简单： 1. 首先构造一个三角形元素 2. 再通过伪元素:before和:after复制2个三角形 3. 使用transform: rotate()方法添加旋转角度。

CSS3,教程

如何使用纯CSS构造圆形、半圆和1/4圆

CSS3三角形叠加构造的炫彩变色水晶

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：