コピペで簡単！BOXデザインCSS・シンプル～アイコンフォント利用まで

/*枠線ボックス*/
.border_box{
border:1px solid #fb8a8a;
padding:20px;
margin-top:20px;
}

/*二重線ボックス*/
.border_box2{
border:4px double #fb8a8a;
padding:20px;
margin-top:20px;
}

..point_box {
position: relative;
border: 2px solid #fb8a8a;
border-radius: 5px;
padding:20px;
margin-top:20px;}
.point_box::before {
content: "POINT";
position: absolute;
top: -15px;left: 15px;
font-size: 1.6rem;
font-weight: 700;
background-color: #ffffff;
color: #fb8a8a;
padding: 0 10px;
}

.question_box{
background-color: #afc5dc;
position:relative;
margin-top:20px;
padding:20px 20px 20px 70px;
border-radius: 5px;
}
.question_box::before{
position:absolute;
top:20px;
left:20px;
font-size:2rem;
font-weight:700;
color: #ffffff;
text-align: center;
vertical-align: middle;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
content: "?";
background: #779dc4;
}

.bikkuri_box{
background-color: #F6E1DF;
position:relative;
margin-top:20px;
padding:20px 20px 20px 70px;
border-radius: 5px;
}
.bikkuri_box::before{
position:absolute;
top:20px;
left:20px;
font-size:2rem;
font-weight:700;
color: #ffffff;
text-align: center;
vertical-align: middle;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
content: "!";
background: #fb8a8a;
}

.arrow_box{
position:relative;
margin-top:20px;
padding:20px 20px 20px 70px;
border-radius: 5px;
background-color: #f5f5f5;
}
.arrow_box::before{
position:absolute;
top:20px;
left:20px;
text-align: center;
vertical-align: middle;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
content: '\f058';
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #fb8a8a;
font-size: 24px;
}