如何在html / css中具有黄色背景的框内创建带有白色感叹号的白色​​边框圆？

Question

I am trying to create a white border circle having a white exclamation mark inside a yellow background box. The HTML and CSS code of the yellow background box is:

HTML:

<p class="my-paragraph-style">List your dependents and enter their personal information. Pay close attention to information regarding your spouse’s smoking habits.</p>

CSS:

.dependents  .my-paragraph-style
{
    background: #EABB27;
    padding: 20px;
    line-height: 1.4;
    position: relative;
    top: -25px;
}

The pictorial representation of the yellow background box which I have got from the above code (HTML and CSS) is:

My task is to make a white border circle having a white exclamation mark inside a yellow box. Below is an image what I exactly want inside a yellow background box:

In order to achieve that, I have cropped the circle from the section of a yellow background box. After cropping it, I have used the following CSS code in order to get the circle inside the box.

@media screen and (max-width: 767px) and (min-width: 320px)
{
.info-mobile-header-sections 
{ /* Info icon for header parts of sections */
    background: url(img/147811205179656.png) no-repeat;
    margin-top: -3px;
    position: absolute;
    z-index: 200;
    left: 15px;
}
}

The 147811205179656.png is a cropped image from the section of a yellow box.

By using the above CSS code, I am able to get only some section of the circle inside the yellow box and that too not aligned properly. Let me know if I am following the right approach.

Answer 1

CSS

.my-paragraph-style
{
    background: #EABB27;
    padding: 40px;
    line-height: 1.4;
    position: relative;
    top: -25px;
}

.my-paragraph-style:before {
  content:"!";
  position: absolute;
  top: 40px;
  left: 10px;
  color: #fff;
  border: 1px solid #fff;
  height: 20px;
  width: 20px;
  text-align: center;
  border-radius: 50%
}

Demo

You can tinker with the css as per your liking.

Answer 2

No need to use an image here, it's easier, faster, more scalable and flexible to use a pseudo element like ::before here:

 .my-paragraph-style { background: #EABB27; padding: 20px 20px 20px 50px; line-height: 1.4; position: relative; font-family: arial, helvetica, sans-serif; color: white; font-weight: bold; font-size: 14px; max-width: 300px; } .my-paragraph-style::before { display: block; position: absolute; left: 20px; top: 23px; content: "!"; border-radius: 50%; border: 1px solid yellow; width: 20px; height: 20px; line-height: 22px; text-align: center; color: yellow; font-weight: normal; } 

 <p class="my-paragraph-style">List your dependents and enter their personal information. Pay close attention to information regarding your spouse's smoking habits.</p> 

Answer 3

You can create that with just :before pseudo-element and Flexbox .

 .my-paragraph-style { background: #EABB27; padding: 20px; max-width: 300px; display: flex; color: white; } .my-paragraph-style:before { flex: 0 0 30px; height: 30px; border: 1px solid white; margin-right: 20px; border-radius: 50%; content: '!'; display: flex; align-items: center; justify-content: center; font-size: 20px; } 

 <p class="my-paragraph-style">List your dependents and enter their personal information. Pay close attention to information regarding your spouse's smoking habits.</p> 

Answer 4

 .my-paragraph-style { background: #EABB27; padding: 20px 20px 20px 50px; line-height: 1.4; color: #fff; } .my-paragraph-style:before { content: '!'; height: 20px; width: 20px; display: block; border: 2px solid red; border-radius: 50%; text-align: center; color: red; float: left; margin-left: -35px; } 

 <p class="my-paragraph-style">List your dependents and enter their personal information. Pay close attention to information regarding your spouse's smoking habits.</p>