<div class="bloggerIconHere"></div>
html, body{
margin: 0;
}
body{
padding: 15px;
min-height: 100vh;
box-sizing: border-box;
display: grid;
place-items: center;
background: #111;
}
.bloggerIconHere, .bloggerIconHere:before, .bloggerIconHere:after{
padding: 0;
margin: 0;
}
.bloggerIconHere{
background: #f57c00;
height: 50px;
width: 50px;
border-radius: 15px;
position: relative;
}
.bloggerIconHere:before, .bloggerIconHere:after{
content: "";
border: 9px solid white;
display: block;
position: absolute;
left: 9px;
}
.bloggerIconHere:before{
border-bottom: none;
border-radius: 11px 11px 0 0;
width: 11px;
height: 5px;
top: 9px;
}
.bloggerIconHere:after{
border-radius: 0 3px 11px 11px;
width: 15px;
height: 3px;
top: 21px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.