Css: показать значок на половинной основе на основе шрифта

Roland Seuhs спросил: 28 апреля 2018 в 09:17 в: html

Я использую набор значков на основе шрифтов (в моем случае шрифт - удивительные значки 4.7), который используется следующим образом:

<i class="fa fa-eye"></i>

То, что я хотел бы сделать, - наложить треугольник в нижнем правом углу, чтобы он выглядел так же, как и значок fa-eye-slash.

Можно ли добавить класс css (например, <i class="fa fa-eye bottom-right-triangle"></i>)), который накладывает треугольник и таким образом заслоняет половину значка?

1 ответ

Есть решение
Temani Afif ответил: 03 мая 2018 в 06:54

Вы можете попробовать что-то вроде этого, используя linear-gradient и псевдоэлемент как ovrelay:

.hide {
  position:relative;
}
.hide:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  top:0;
  background:linear-gradient(to bottom right,transparent 50%,#fff 50.5%);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<i class="fas fa-eye fa-5x hide"></i>