五角星星符号大全花样符号（五角星符号全收录，花样符号大集合）

五角星符号全收录，花样符号大集合

作为日常使用中较为常见的符号之一，五角星符号在各类场合中得到广泛运用。无论是一些活动的标志与宣传物料中，还是在设计中进行运用，五角星总能给人带来各种不同的风格感受。今天，我们为大家汇总整理了一些常见的五角星花样符号，从简单到复杂，让大家可以了解到五角星符号的更多应用方式。

基本五角星符号

最基本的五角星，由五条相等的线段组成，每条线段之间夹角为72度。在日常文本中，我们可以使用unicode符号“★”，在html中如下代码：

<p>使用unicode符号：★</p>

效果如下：

使用unicode符号：★

除此以外，在css中我们也可以使用“::before”与“::after”两个伪元素来创建五角星：

<div class=\"star\"></div><style>.star{  display: inline-block;  position:relative;  width: 0;  height: 0;  border: 10px solid transparent;  border-right-color: gold;  transform:rotate(35deg);}.star::before,.star::after{  content: '';  display: inline-block;  position: absolute;  top: -10px;  left: -10px;  height: 0;  width: 0;  border: 10px solid transparent;  border-right-color: gold;  transform:rotate(70deg);}.star::after{  transform:rotate(-70deg);}</style>

通过上述代码可以创建出一个简单的五角星。

不同风格五角星

五角星符号有时，也可以出现在一些更为特殊的场合中，在创意设计中起到了巨大作用。

例如，在一款创意字体设计中，可以使用五角星进行装点，同时通过改变五角星的形状，可以呈现出不同的风格感受。

<p>默认五角星<i class=\"fa fa-star-o\"></i>尖角五角星<i class=\"fa fa-star-half-o\"></i>五角星<i class=\"fa fa-star\"></i>空心五角星<i class=\"fa fa-star-half\"></i></p>

效果如下：

默认五角星尖角五角星五角星空心五角星

五角星组合花样

五角星不仅可以单独使用，还可以进行组合拼接，创造出更为复杂的效果，为文本、图片等进行装点。在这里分享一些优秀的五角星组合示例。

五角星流星组合

<div class=\"star-meteor\"></div><style>.star-meteor{  font-size: 0;  position: relative;  width: 60px;  height: 50px;}.star-meteor::before,.star-meteor::after{  content: '';  display: inline-block;  position: absolute;  width: 0;  height: 0;  border: 25px solid transparent;  border-right-color: #f8d23e;  transform-origin: center right;  animation: star-meteor 2s ease-in-out infinite;}.star-meteor::before{  left: 0;  top: 0;  transform: rotate(0deg);}.star-meteor::after{  right: 0;  bottom: 0;  transform: rotate(-180deg);}@keyframes star-meteor{  0% {    transform: rotate(0deg) translateX(0);  }  50% {    transform: scale(1.2) rotate(90deg) translateX(10px);  }  100%{    transform: scale(1) rotate(180deg) translateX(20px);  }}</style>

五角星背景组合

<div class=\"star-bg\"></div><style>.star-bg{  font-size:0;  position: relative;  width: 200px;  height: 200px;  background:linear-gradient(#f9f4c1 5px, transparent 1%) center/10px 10px repeat;}.star-bg::before,.star-bg::after{  content:'';  display: inline-block;  position: absolute;  width: 70px;  top: -30px;  right:-35px;}.star-bg::before{  height: 70px;  transform:rotate(15deg);  background:gold;  clip-path: polygon(50% 0%, 100% 38%, 82% 94%, 18% 94%, 0% 38%);}.star-bg::after{  height: 70px;  transform:rotate(-15deg);  background:gold;  clip-path: polygon(50% 0%, 100% 38%, 82% 94%, 18% 94%, 0% 38%);}</style>

以上即为部分五角星的运用方式，其中还有更为丰富的情况等待大家在不断实践与尝试中去发掘。从简单的五角星基本组成到复杂的组合运用，我们希望这些五角星花样符号可以缓解大家日常设计中的焦虑与压力，带来更多灵感与想法。

下一篇:合法违章TXT百度云（合法违章TXT百度网盘分享方式） 下一篇 【方向键 ( → )下一篇】

上一篇:李煜简介及生平事迹详细介绍（李煜——史上最后的南唐皇帝） 上一篇 【方向键 ( ← )上一篇】