Как закодировать этот значок со свойством фона в элементе?

Как я могу создать этот значок только с линейными градиентами?

Я пробовал до сих пор:

.a {
  height: 45px;
  width: 45px;
  background: linear-gradient(to top, #444 0px, #444 15px, transparent 15px, transparent 45px) 0px 30px/15px 15px no-repeat,
    linear-gradient(to top, #444 0px, #444 30px, transparent 30px, transparent 45px) 15px 15px/15px 30px no-repeat,
    linear-gradient(to top, #444 0px, #444 45px) 30px 0px/45px 45px no-repeat;
}

<div class = "a"></div>

Но это не отображается должным образом в хроме. Как вы видете:

Как закодировать этот значок со свойством фона в элементе?

Но когда я увеличил масштаб, он отображается правильно. Зачем?

Здесь он отображается нормально (Windows 10 — Chrome 75.0.3770.100 (64 бита)), вы изначально пытались сделать снимок экрана со 100% увеличением?

— 26.06.2019 15:23

html css

26.06.2019 15:17

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте перекрывающийся градиент, чтобы избежать этой проблемы, и лучше рассмотрите процентное значение, чтобы сделать его отзывчивым:

.a {
  height: 45px;
  width: 45px;
  background: 
    linear-gradient(#444,#444) right bottom / calc(1*100%/3) calc(3*100%/3),
    linear-gradient(#444,#444) right bottom / calc(2*100%/3) calc(2*100%/3),
    linear-gradient(#444,#444) right bottom / calc(3*100%/3) calc(1*100%/3);
  background-repeat:no-repeat; 
}

<div class = "a"></div>

<div class = "a" style = "width:90px;height:90px;"></div>

Другой синтаксис:

.a {
  height: 45px;
  width: 45px;
  background-image: 
    linear-gradient(#444,#444),
    linear-gradient(#444,#444),
    linear-gradient(#444,#444);
  background-size:
    calc(1*100%/3) calc(3*100%/3),
    calc(2*100%/3) calc(2*100%/3),
    calc(3*100%/3) calc(1*100%/3);
  background-position:right bottom;
  background-repeat:no-repeat; 
}

<div class = "a"></div>

Еще одна идея с фоном и рамкой:

.a {
  --s:15px;
  width: var(--s);
  height: var(--s);
  border-right: var(--s) solid #444;
  border-bottom: var(--s) solid #444;
  padding: var(--s) 0 0 var(--s);
  background: #444 content-box;
}

<div class = "a"></div>

<div class = "a" style = "--s:30px;"></div>

26.06.2019 15:34

Другие вопросы по теме

Css hover не влияет на кнопку asp

Вертикальная прокрутка сетки

Альтернативные таблицы стилей не отображаются в разделе «Просмотр > Стиль страницы» в Firefox

Поле содержимого размером менее 960 пикселей — вне окна

Есть ли способ выбрать страницу параметров и нажать «Отправить», чтобы передать информацию на выбранную страницу параметров?

Как решить Не удается назначить свойство «экспорт» объекта только для чтения в реакции?

Как переопределить css

Почему зазор сетки игнорируется в этом многострочном элементе сетки?

Чистые альтернативы Javascript для переключения класса CSS?

Добавление значка обновления в заголовок панели JSF

Как закодировать этот значок со свойством фона в элементе?

Ответы 1

Другие вопросы по теме

Похожие вопросы