text in circle

by dreamdealer

HTML

<div class="star"><div class="sun">
        <b>T</b><b>E</b><b>R</b><b>R</b><b>A</b>
</div></div>

CSS

body {
    font-family: arial;   
}
.star {
    width: 400px;
    height: 350px; 
    position: relative;  
}
.sun {
    width: 200px;   
    height: 200px;
    background: red;
    border-radius: 50%;
    text-align: center;
    line-height: 200px;
    font-size: 30px;
    z-index: 2;
    position: absolute;
    top: 42%;
    left: 24%;
}
.star:before {
    content: '★';
    z-index: 1;
    font-size: 400px;
    
}
.sun b {
    font-weight: normal;
    background: yellow;
    margin: 0px 3px;
    padding: 2px 5px;
}