五角星符號全收錄，花樣符號大集合

作為日常使用中較為常見的符號之一，五角星符號在各類場合中得到廣泛運用。無論是一些活動的標志與宣傳物料中，還是在設計中進行運用，五角星總能給人帶來各種不同的風格感受。今天，我們?yōu)榇蠹覅R總整理了一些常見的五角星花樣符號，從簡單到復雜，讓大家可以了解到五角星符號的更多應用方式。

基本五角星符號

最基本的五角星，由五條相等的線段組成，每條線段之間夾角為72度。在日常文本中，我們可以使用unicode符號“★”，在html中如下代碼：

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

效果如下：

使用unicode符號：★

除此以外，在css中我們也可以使用“::before”與“::after”兩個偽元素來創(chuàng)建五角星：

<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>

通過上述代碼可以創(chuàng)建出一個簡單的五角星。

不同風格五角星

五角星符號有時，也可以出現(xiàn)在一些更為特殊的場合中，在創(chuàng)意設計中起到了巨大作用。

例如，在一款創(chuàng)意字體設計中，可以使用五角星進行裝點，同時通過改變五角星的形狀，可以呈現(xiàn)出不同的風格感受。

<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>

效果如下：

默認五角星尖角五角星五角星空心五角星

五角星組合花樣

五角星不僅可以單獨使用，還可以進行組合拼接，創(chuàng)造出更為復雜的效果，為文本、圖片等進行裝點。在這里分享一些優(yōu)秀的五角星組合示例。

五角星流星組合

<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>

以上即為部分五角星的運用方式，其中還有更為豐富的情況等待大家在不斷實踐與嘗試中去發(fā)掘。從簡單的五角星基本組成到復雜的組合運用，我們希望這些五角星花樣符號可以緩解大家日常設計中的焦慮與壓力，帶來更多靈感與想法。

下一篇:合法違章TXT百度云（合法違章TXT百度網(wǎng)盤分享方式） 下一篇 【方向鍵 ( → )下一篇】

上一篇:李煜簡介及生平事跡詳細介紹（李煜——史上最后的南唐皇帝） 上一篇 【方向鍵 ( ← )上一篇】