FontAwesome Полосатая звезда
Я пытаюсь создать полосатую звезду, используя font-awesome fa-star-o
значок как показано ниже. Я использовал background-Gradient для создания этого эффекта, но вместо того, чтобы просто покрывать значок звезды, он покрывает все квадратное пространство вокруг значка. Может быть, то, чего я пытаюсь добиться, невозможно с помощью значков со шрифтами, поэтому открывайте и другие предложения, но я бы предпочел ответ с иконкой.
<script src="https://use.fontawesome.com/eed659c9d4.js"></script>
<style>
.fa-star-o {
color: #cbb247;
font-size: 24px;
background: repeating-linear-gradient( -45deg, #e6c84b, #e6c84b 2px, #FFF 2px, #FFF 4px);
}
</style>
<i class="fa fa-star-o"></i>
2 ответа
Вы можете сделать это используя background-clip: text;
,
.fa-star {
font-size: 24px;
position: relative;
}
.fa-star::before {
background: repeating-linear-gradient( -45deg, #e6c84b, #e6c84b 2px, #FFF 2px, #FFF 4px);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
.fa-star::after {
content: "\f006";
position: absolute;
top: 0;
left: 0;
color: #cbb247;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<i class="fa fa-star"></i>
Сначала я хотел бы рассмотреть возможность использования em
вместо px
иметь что-то более однородное, что масштаб с font-size
, Тогда уловка состоит в том, чтобы объединить несколько градиентов, чтобы скрыть ненужную часть.
Конечно, это скорее плохой взлом, чем универсальное решение, так как вам нужно приложить много усилий, чтобы правильно рассчитать градиенты, и у вас не будет прозрачности:
.fa-star-o {
color: #cbb247;
background:
linear-gradient(#fff,#fff) right/14% 100% no-repeat,
linear-gradient(#fff,#fff) left/14% 100% no-repeat,
linear-gradient(#fff,#fff) top/100% 14% no-repeat,
linear-gradient(#fff,#fff) top left/39% 35% no-repeat,
linear-gradient(#fff,#fff) top right/43% 35% no-repeat,
linear-gradient(#fff,#fff) bottom right/27% 48% no-repeat,
linear-gradient(#fff,#fff) bottom left/27% 48% no-repeat,
linear-gradient(to top left,#fff 50%,transparent 50%) bottom left/51% 24% no-repeat,
linear-gradient(to top right,#fff 50%,transparent 50%) bottom right/51% 24% no-repeat,
repeating-linear-gradient( -45deg, #e6c84b, #e6c84b 0.1em, #FFF 0.1em, #FFF 0.2em);
}
<script src="https://use.fontawesome.com/eed659c9d4.js"></script>
<i class="fa fa-star-o fa-5x" style="font-size:100px;"></i>
<i class="fa fa-star-o fa-5x"></i>
<i class="fa fa-star-o fa-3x"></i>
<i class="fa fa-star-o fa-2x"></i>