Знак плюса или крест на CSS
Знак плюса или крест, используя только CSS. Пример:
HTML код:
<div class="plus"></div>
CSS код:
.plus {
width: 100px;
height: 100px;
background: linear-gradient(to bottom, transparent 35%, #000 35%, #000 65%, transparent 65%), linear-gradient(to right, transparent 35%, #000 35%, #000 65%, transparent 65%);
}
Знак плюса или крест на CSS
Не используются изображения, специальные символы или буквы. Не создаются псевдоэлементы :before и :after. Только чистый CSS и только один HTML-элемент.
Поддержка в браузерах
- Windows: Google Chrome 26.0+, Firefox 16.0+, Edge 12.0+, Internet Explorer 10.0+, Opera 12.10+
- Android: Samsung Internet 1.5+, Android Browser 4.0+, WebView Android 37.0+, Chrome Android 26.0+, Firefox for Android 16.0+, Opera Android 14.0+
- iOS: Safari 7.0+
- developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
- caniuse.com/?search=linear-gradient
Теги: CSS, Геометрические + фигуры + CSS
- Опубликовано: 21 Января, 2023
- Последнее редактирование: 18 Февраля, 2023