Создание знака «плюс» с помощью CSS
У меня есть макет для создания того, что выглядит как довольно простой знак плюс. Однако мои навыки в CSS не очень хороши. Создание круга — это не очень важно, но создание внутри него знака плюс я не могу понять. Вот что я пытаюсь сделать.
Макет
Вот что у меня есть в настоящее время
Вот мой код пока что:
html
.circle
Так что довольно простое, но если кто-то знает, как добавить знак плюс, вы сделаете мою ночь немного приятнее! Спасибо за помощь!
Поделиться Источник 09 декабря 2016 в 00:13
5 ответов
Вы можете очень хорошо использовать псевдо-элементы ::after и ::before :
.circle < border-radius: 50%; width: 200px; height: 200px; background-color: rgb(44, 108, 128); position: relative; >.circle::after < content: " "; position: absolute; display: block; background-color: #fff; height: 10px; margin-top: -5px; top: 50%; left: 5px; right: 5px; z-index: 9; >.circle::before
Основываясь на высоте ширины , плюс будет отзывчивым.
Поделиться 09 декабря 2016 в 00:19
Вот решение, которое фактически рисует символ ‘+’ в шрифте по вашему выбору.
Оно использует flexbox для достижения горизонтального и вертикального центрирования.
.circle < border-radius: 50%; width: 200px; height: 200px; background-color: rgb(44,108,128) >.circle::before
Поделиться 09 декабря 2016 в 00:26
Используя еще два div внутри вашего исходного div и некоторый креативный CSS:
.circle < border-radius: 50%; width: 200px; height: 200px; background-color: rgb(44,108,128) >.horizontal-plus < position: relative; background-color: #FFFFFF; width: 50%; height: 12.5%; left: 25%; top: 43.75%; >.vertical-plus
Это выглядит довольно близко к вашему макету.
Редактирование: Добавлено процентное значение, чтобы сделать его размерным для размера родителя.
Поделиться 09 декабря 2016 в 00:25
Это решение имеет преимущество, что размер крестика в % относительно круга, поэтому если вы измените размер круга, крестик примет его. Не стесняйтесь редактировать размеры полос в крестике, но не забудьте изменить left и top соответственно.
.circle < border-radius: 50%; width: 200px; height: 200px; background-color: rgb(44,108,128); position: relative; >.bar < margin: 0 auto; position: absolute; background-color: #fff; >.horizontal < width: 70%; height: 20%; left: 15%; top: 40%; >.vertical
CSS фигуры
Очередная порция впечатляющих возможностей CSS — коллекция фигур на чистом CSS. Никаких картинок в Фотошопе и сложной разметки. С помощью псевдоэлементов, рамок и теней можно создавать сложные css-фигуры на основе всего лишь одного html-элемента.
1. Круг
2. Овал
3. Треугольник вершиной вверх
4. Треугольник вершиной вниз
5. Треугольник вершиной влево
6. Треугольник вершиной вправо
7. Верхний левый угол
8. Верхний правый угол
9. Нижний левый угол
10. Нижний правый угол
11. Трапеция
12. Параллелограмм
13. Шестиугольная звезда
.d13 < width: 0; height: 0; margin-bottom: 30px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #374F9C; position: relative; >.d13:after
14. Пятиугольная звезда
.d14 < margin: 50px 0; height: 0; width: 0; position: relative; border-right: 50px solid transparent; border-bottom: 35px solid #E7337A; border-left: 50px solid transparent; transform: rotate(35deg); >.d14:before, .d14:after < content: ""; height: 0; width: 0; position: absolute; >.d14:before < top: -26px; left: -32px; border-bottom: 40px solid #E7337A; border-left: 15px solid transparent; border-right: 15px solid transparent; transform: rotate(-35deg); >.d14:after
15. Стрелка
.d15 < width: 60px; height: 20px; margin: 10px 0; background: #B74388; position: relative; >.d15:after
16. Шестиугольник
.d16 < margin: 20px 0; width: 100px; height: 55px; background: #F1CCAE; position: relative; >.d16:before, .d16:after < content: ""; width: 0; height: 0; position: absolute; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; >.d16:before < top: -25px; border-bottom: 25px solid #F1CCAE; >.d16:after
17. Восьмиугольник
.d17 < width: 100px; height: 100px; background: #54999A; position: relative; >.d17:before, .d17:after < content: ""; width: 42px; height: 0; position: absolute; left: 0; border-left: 29px solid white; border-right: 29px solid white; >.d17:before < top: 0; border-bottom: 29px solid #54999A; >.d17:after
18. Сердце
.d18 < position: relative; width: 100px; height: 80px; >.d18:before, .d18:after < content: ""; position: absolute; left: 50px; top: 0; width: 50px; height: 80px; background: #EE4156; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; >.d18:after
19. Ромб
.d19 < width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #53BA88; position: relative; top: -50px; >.d19:after
20. Ромб
.d20 < margin-bottom: 20px; width: 0; height: 0; border: 50px solid transparent; border-bottom: 70px solid #47002D; position: relative; top: -50px; >.d20:after
21. Символ Инь-Ян
.d21 < width: 100px; height: 50px; background: white; border-color: black; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 50%; position: relative; >.d21:before, .d21:after < content: ""; width: 12px; height: 12px; position: absolute; top: 50%; border-radius: 50%; >.d21:before < left: 0; background: white; border: 19px solid black; >.d21:after
22. Пакман
23. Домик с крышей
.d23 < height: 55px; width: 100px; margin: 35px 20px 0 0; background: #B1BA5C; position: relative; >.d23:before
Как сделать знак плюс в точном центре круга на css?
Добрый день. Возникла следующая проблема. Требовалось создать значок «плюс в кружке», где плюс находится точно в центре кружка. При этом сам плюс является after-псевдоэлементом для одного div-а.
Код псевдоэлемента:
content: '+'; display: flex; position: absolute; z-index: 5; font-size: 35px; font-weight: 400; color: white; background-color: #1ED4B3; border: solid 1px #1ED4B3; border-radius: 50%; width: 45px; height: 45px; align-items: center !important; flex-direction:column !important; justify-content: space-evenly !important;Всё работает нормально для десктопных версий, но на всех мобильных браузерах проблема в том, что знак плюса в кружке сдвинут кверху, а не находится по центру.
Пробовал уже использовать знак заглавного плюса U+FF0B , пробовал использовать justify-content: space-between , justify-content: space-around , justify-content: center , align-items: stretch .
Есть идеи, из-за чего такое может быть и как это можно исправить?
Более полный код (включая класс div-а , к которому привязан псевдоэлемент):
.div__after < display: flex; flex-direction: column; align-content: center; align-items: center; &::after< content: '+'; display: flex; position: absolute; z-index: 5; font-size: 35px; font-weight: 400; color: white; background-color: #1ED4B3; border: solid 1px #1ED4B3; border-radius: 50%; width: 45px; height: 45px; align-items: center !important; flex-direction:column !important; justify-content: space-evenly !important; @media (--xs-viewport)< top: calc(100% - 10px); >@media (--md-viewport) < top: 25%; left: calc(100% - 10.5px); >@media (--lg-viewport) < left: calc(100% - 7.5px); >> >- Вопрос задан 27 июн. 2023
- 380 просмотров
Комментировать
Решения вопроса 1
Виталий Першин @Get-Web Куратор тега CSS
Front-End Developer
Сделайте плюс не шрифтом, а блоком из горизонтальной и вертикальной линий, потому что у шрифтов полно свойств:
Чему к примеру равна горизонтальная линия вашего шрифтового плюса при размере 35px? Если у вас размер блока 45px, то линия должна быть так же с нечетным размером ровно 1px или 3px, или 5px в любом другом случае (1.2px, 3.6px, 4px) браузер начнет смещать ваш плюс вверх и вниз, что вы и наблюдаете.
Если же блок будет с четным значением, например 44px, тогда, чтобы плюс стал по центру у него должен быть размер 2px,4px и т.д..
Шрифты для такой задачи не подходят, тем более с изменением шрифта изменится и его центр.
Ответ написан 27 июн. 2023
Нравится 4 4 комментария
vladimirir @vladimirir Автор вопроса
Спасибо! Прошу прощения за, возможно, нубский вопрос, но как я смогу две пересекающиеся черты в content вставить?
Что означает «+» (знак плюс) CSS-селектор?
Этот селектор означает, что стиль применяется только к параграфам, непосредственно следуя за другим абзацем.
Простой селектор p применил бы стиль к каждому абзацу на странице. Смотрите смежные селектора на W3.org. Это будет работать только на IE7 или выше. В IE6 стиль не будет применяться к каким-либо элементам. Это также относится к комбинатору > , кстати. См. также обзор Microsoft для совместимость CSS в Internet Explorer.
Thorarin 16 июль 2009, в 19:36
Поделиться
это работает на IE6?
marcgg 16 июль 2009, в 19:36
Нет, согласно quirksmode.org/css/contents.html
Psycho_Penguin 16 июль 2009, в 19:49
Я считаю полезным не сворачивать элемент, когда он скрыт. Поэтому более подходящим способом скрыть это является использование visibility : hidden/visible вместо display : none/block . Смотрите эту ссылку .
KFL 24 авг. 2014, в 05:40
какая будет разница между р + р и р> р
Muhammad Rizwan 28 нояб. 2016, в 17:30
@MuhammadRizwan p > p означает вложенный p , т.е. любой p который находится непосредственно ниже другого p , например
This paragraph
.
Banana 30 июль 2017, в 05:49
Показать ещё 3 комментария
Это смежный селектор.
Чтобы определить смежный селектор CSS, плюс.
Вышеупомянутый код CSS будет форматировать первый абзац после (не внутри) любых заголовков h1 как синий.
h1>p выбирает любой элемент p , который является прямым (первым поколением) дочерним элементом (внутри) элемента h1 .
- h1>p соответствует (
внутри )
h1+p будет выбирать первый элемент p , который является братом (на том же уровне dom) как элемент h1 .
- h1+p соответствует
(
рядом с/после )
Matthew Vines 16 июль 2009, в 21:13
Поделиться
Я запутался между plus sign и greater sign . Если я использую h1>p вместо h1+p , это даст мне тот же результат? Не могли бы вы немного объяснить, насколько они отличаются?
lvarayut 13 май 2014, в 13:56
В ваших примерах h1>p выбирает любой элемент p который является прямым (первое поколение) дочерним элементом элемента h1 . h1+p выберет первый элемент p который является родным (на том же уровне dom), что и элемент h1 . h1>p соответствует
, h1+p соответствует
Matthew Vines 13 май 2014, в 15:20
Спасибо за пример, отличный от p + p (что сбивает с толку).
Gustavo 17 июль 2015, в 14:23
@ MatthewVines вы должны добавить, что h1> p и h1 + p к вашему ответу
MonsterMMORPG 27 июнь 2016, в 20:41
Таким образом, по существу, в вашем примере он будет соответствовать первому
после , но будет ли он совпадать с тем же
, если он предшествовал ? Или это только после?
Vincent 02 янв. 2019, в 20:43
Показать ещё 3 комментария
Знак + означает adjacent sibling
CSS
p + p
HTML
Стиль будет применяться со второго
Пример
Поддержка браузера
Селекторы смежных-сиблингов поддерживаются в Internet Explorer 5.x Macintosh. Они также поддерживаются в предварительном выпуске Netscape 6 для всех бесчисленных платформ, для которых он доступен, и в предварительном выпуске 3 Opera 4 для Windows. Есть ошибки в работе с селекторами соседнего собора в IE5 для Windows и Opera 3 для Windows.
Полезно знать: Internet Explorer 7 не обновляет стиль правильно, когда элемент динамически помещается перед элементом, который соответствует селектору. В Internet Explorer 8, если элемент вставлен динамически, нажав на ссылку, стиль первого ребенка не применяется до тех пор, пока ссылка не потеряет фокус.
Подробнее
- http://css-tricks.com/almanac/selectors/a/adjacent-sibling/
- http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
- https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors