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

Question

我正在尝试在黄色背景框内创建一个带有白色感叹号的白色​​边框圆圈。黄色背景框的HTML和CSS代码是：

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;
}

我从上面的代码（HTML和CSS）得到的黄色背景框的图形表示是：

我的任务是在黄色方框内制作一个带有白色感叹号的白色​​边框。下面是黄色背景框中我想要的图像：

为了实现这一点，我从黄色背景框的部分裁剪了圆圈。在裁剪之后，我使用了以下CSS代码来获取框内的圆圈。

@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;
}
}

147811205179656.png是黄色方框中的裁剪图像。

通过使用上面的CSS代码，我只能得到黄色框内的圆圈的一些部分，而且也没有正确对齐。如果我遵循正确的方法，请告诉我。

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

你可以根据自己的喜好修补css。

Answer 2

这里不需要使用图像，这里使用像::before这样的伪元素更容易，更快，更具可扩展性和灵活性：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用:before伪元素和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>