Восклицательный знак в круге: Горит восклицательный знак: почему, что делать?

Am beliebtesten

Варнцайхен. Ausrufe-Gefahrenzeichen. Warnungen, Achtung sumbol….

Rotes Ausrufezeichen Kreis Warnung oder Gefahr Risikomeldung Aurnung oder Gefahr Risikomeldung Aurnung oder Gefahr Risikomeldung Warnung oder Gefahr Risikomeldung Warnung Problem Symbolhintergrundkonzept 3d-rendering — восклицательный знак в круге стоковые фотографии и изображения

Rotes Ausrufezeichen Kreis Warnung oder Gefahr Risikomeldung Aurnung

zwei Symbole mit Rechtschreibsymbolen in gelben Dreiecken

Häkchen-, Kreuz-, Ausrufezeichen- und Fragezeichensymbole auf 3D-S

Häkchen, Kreuz, Fragezeichen, Ausrufezeichen, Informationssymbol gesetzt. Farbkreis buble Информационные иллюстрациисимвол. Кнопка App-кнопки векторные значки.

Sammlung von Ausrufezeichen. Setzen Sie ein…

Ausrufezeichen im Kreis

Ausrufezeichen, Aufmerksamkeitszeichen, Warnsymbol,…

Ausrufezeichen, Aufmerksamkeitszeichen, Vorsichtssymbol, Gefahrenwarnsymbol, Vektormarkensymbole Gelber Stil. Изолиертский символ. Флаш Векториллюстрация.

Ausrufezeichen, Aufmerksamkeitszeichen, Warnsymbol,. ..

Ausrufezeichen, Aufmerksamkeitszeichen, Vorsichtssymbol, Gefahrenwarnsymbol, Vektormarkensymbole Gelber Stil. Изолиертский символ. Флаш Векториллюстрация.

Zeichen, ja, Nr. 1

Zeichen, Symbole. Фрагецайхен, Аусруфецайхен. Bestätigung und Ablehnung der Wahl. Symbolsatz überprüfen (ja, nein). Векторграфик.

Ausrufezeichen-Symbol. Символ для Warnlogo. Синьерен Си…

Ausrufezeichensymbol. Символ для иллюстрации Warnlogos. Проблемный вектор.

Fragezeichensymbol des Meldungsfelds. Blau, rot und gelb…

Fragezeichensymbol im Meldungsfeld. Синий, красный и желтый Talk-Illustrationssymbol. Знак «Думай, чат-вектор».

Großes Fragezeichen und Ausrufezeichen в рандере Sprechblase.

Großes Fragezeichen und Ausrufezeichen in runder Sprechblase. Диалог-Дудл-Стиль. Проблема и Lösungssymbol. Векториллюстрация.

Rundes Warnschild в schwarzem Flachbau. Fehlerwarnung мит…

Rundes Warnschild в schwarzer Flachbauweise. Fehlermeldung mit schwarzem Ausrufezeichen im Kreis. Предупреждающий символ, um eine Aufmerksamkeitsnachricht zu erhalten. Вектор EPS 10

Rundes Warnschild в ротем Flachbau. Fehlerwarnung mit weißem…

Ausrufezeichen Icon Vector Illustration

Handgezeichnete Ovale, Filzspitzen-Stifterkreise. Raue…

Setzen Sie handgezeichnete Ovale, Filzspitzen-Stiftkreise. Гробе Векторрахменелементе. Векторная фондовая иллюстрация.

Затц фон Варнцайхен. Gefahrenwarn-Hinweisschild

Satz von Warnzeichen. Gefahrenwarnung Aufmerksamkeitszeichen. Векторная иллюстрация изолирована на прозрачном фоне

Fragezeichen und Ausrufezeichensymbol. Online-Communikations-…

Setzen Sie Zeichen Achtung bitte! leuchtend gelb und rot Band…

Setzen Sie bitte ein Zeichen Achtung! Leuchtend gelber und roter Menübandtext. Banner, um Aufmerksamkeit zu erregen. Векториллюстрация. Design mit Aufmerksamkeit bitte, für Poster oder Schild.

Großes Sammlungszeichen Fragezeichen. Крайшайхен…

Großes Sammelzeichen Fragezeichen. Kreiszeichen Ausrufezeichen. Frage, Halt, Warnung und Verkehrszeichen, Vektorillustration.

Ausrufung und Fragezeichen Icon-Vektor. Das Zeichen der…

Quiz-Logo mit Sprechblase-Symbolen, Konzept der Fragebogen-Show…

Warnung Zeichen Symbol Vektor einfach

Чат Frage-Symbol isoliert auf blauem Hintergrund. Хельфен Зи…

Quiz-Zeitlogo mit Sprachblasensymbolen, Konzept der Fragebogen-Sho

Quiz-Zeit-Logo mit Sprechblasen-Symbolen, Konzept der Fragebogen-Show-Sing, Quiz -Кнопка времени, Fragewettbewerb. Векторная фондовая иллюстрация.

Handgezeichnete Ovale, Filzspitzen-Stifterkreise. Raue…

Setzen Sie handgezeichnete Ovale, Filzspitzen-Stiftkreise. Гробе Векторрахменелементе. Векториллюстрация.

Ausrufung und Fragezeichen Icon-Vektor. Das Zeichen der…

White Chat Frage-Symbol с изолированным изображением. Hilfe…

Ausrufezeichen Icon Vector Illustration -symbole

Ausrufezeichen Gefahr Zeichen

Ausrufezeichen

Gefahr Warnung Liebe Zeichen mit Ausrufezeichen mark-symbol. ..

Kein Trinken unter 21, Alkohol verboten Бар плакат

Papier geschnitten Chat Frage Symbol isoliert auf gruem…

Straßrenschild gelbes Straßenschild,

Chat Frage-Symbol с изолированным изображением. Helfen Sie…

Aufmerksamkeitszeichen. Гефаренварн-Варнтафель. Gestreifter…

Ausrufezeichen-Symbol blau Vektor

Ausrufezeichen Symbol Vektor blauer Kreis isoliert auf weißem Hintergrund

Ausrufezeichen-Symbol

Symbol für Ausrufezeichenzeichen. Символ Hilfe-Sprechblasen. Часто задаваемые вопросы-Zeichen. Полный набор

ручной рукописный шрифт в песке на берегу

Символ предупреждения. Вектор-иллюстрация с ярким дизайном

Aufmerksamkeitszeichen mit Ausrufezeichensymbol. Satz von…

Aufmerksamkeitszeichen mit Ausrufezeichensymbol. Satz von Ausrufezeichen в Verkehrszeichen. Symbol gefährlich isoliert auf weißem Hintergrund.

Handgezeichnete Ovale, Filzspitzen-Stifterkreise. Raue…

Ausrufezeichen Muster nahtlos

Black Chat Frage Symbol isoliert nahtlose Muster auf weißem…

Urlaub Geschenk-Box в gelben Kreis. Гебуртстагсфайер.

Weihnachtsgeschenkbox im gelben Kreis. Гебуртстагсфайер. Überraschung лила Geschenkbox. Wundergeschenk mit Ausrufezeichen. Векторные символы в современном стиле flachen auf weißem Hintergrund.

Bunte web-Schaltflächen, Kontrollkästchen, Hinweise und Büro pins

Ausrufezeichen in gelbem Kreis und Schatten

Чат-фрагмент-символ изолирован на прозрачном фоне. Хилфе…

Ausrufezeichen Gefahr Zeichen

Für die Verwendung benötigtes allgemeines Symbol für Ausrufegefahrenzeichen

Glühende Neon Chat Frage Symbol isoliert auf Ziegelwand…

Gefahrenwarnsymbol

Ausrufezeichen-Icon-Set. Вектор-Иллюстрация-Символ-Концепт.

Ausrufezeichen. Вектор

Bunte web-Schaltflächen und Hinweise

Bunte Webschaltflächen und Kartenpositionszeiger

Проблема символ векторная иллюстрация

Как создать белый круг с белым восклицательным знаком внутри поля с желтым фоном в html/css?

Задавать вопрос

спросил 6 лет, 4 месяца назад

Изменено 4 года, 3 месяца назад

Просмотрено 6к раз

Я пытаюсь создать белый круг с белым восклицательным знаком внутри желтого фона. Код HTML и CSS окна с желтым фоном:

HTML:

 
Составьте список своих иждивенцев и введите их личную информацию. Обратите особое внимание на информацию о привычках вашего супруга к курению.
 

CSS:

 .depends .my-paragraph-style
{
    фон: #EABB27;
    отступ: 20 пикселей;
    высота строки: 1,4;
    положение: родственник;
    верх: -25px;
}
 

Графическое представление желтого фонового поля, которое я получил из приведенного выше кода (HTML и CSS):

Моя задача — сделать белый круг с белым восклицательным знаком внутри желтого прямоугольника. Ниже приведено изображение, которое я точно хочу внутри желтого фонового поля:

Чтобы добиться этого, я вырезал круг из секции желтого фона. После обрезки я использовал следующий код CSS, чтобы получить круг внутри коробки.

 Экран @media и (максимальная ширина: 767 пикселей) и (минимальная ширина: 320 пикселей)
{
.info-mobile-header-разделы
{ /* Значок информации для заголовков разделов */
    фон: url(img/147811205179656. png) без повторов;
    верхнее поле: -3px;
    положение: абсолютное;
    z-индекс: 200;
    слева: 15 пикселей;
}
}
 

147811205179656.png — это обрезанное изображение из части желтого прямоугольника.

Используя приведенный выше код CSS, я могу получить только часть круга внутри желтого прямоугольника, и она тоже не выровнена должным образом. Дайте мне знать, если я следую правильному подходу.

• html
• css

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

 .мой-стиль-абзаца {
  фон: #EABB27;
  отступ: 20px 20px 20px 50px;
  высота строки: 1,4;
  положение: родственник;
  семейство шрифтов: arial, Helvetica, без засечек;
  белый цвет;
  вес шрифта: полужирный;
  размер шрифта: 14px;
  максимальная ширина: 300 пикселей;
}
.my-paragraph-style::before {
  дисплей: блок;
  положение: абсолютное;
  слева: 20 пикселей;
  верх: 23px;
  содержание: "!";
  радиус границы: 50%;
  граница: 1 пиксель сплошной желтый;
  ширина: 20 пикселей;
  высота: 20 пикселей;
  высота строки: 22px;
  выравнивание текста: по центру;
  цвет: желтый;
  вес шрифта: нормальный;
} 

 
Составьте список своих иждивенцев и введите их личную информацию.  Обратите особое внимание на информацию о курении вашего супруга.
 

2

Вы можете создать это с помощью псевдоэлемента :before и Flexbox .

 .my-paragraph-style {
  фон: #EABB27;
  отступ: 20 пикселей;
  максимальная ширина: 300 пикселей;
  дисплей: гибкий;
  белый цвет;
}
.my-paragraph-style: перед {
  флекс: 0 0 30px;
  высота: 30 пикселей;
  граница: 1px сплошной белый;
  поле справа: 20px;
  радиус границы: 50%;
  содержание: '!';
  дисплей: гибкий;
  выравнивание элементов: по центру;
  выравнивание содержимого: по центру;
  размер шрифта: 20px;
} 

 
Составьте список своих иждивенцев и введите их личную информацию. Обратите особое внимание на информацию о привычках вашего супруга к курению.
 

CSS

 .my-paragraph-style
{
 фон: #EABB27;
 отступ: 40px;
 высота строки: 1,4;
 положение: родственник;
 верх: -25px;
}
.