the background is a four-color ball, and then displays the text in two lines
the first line is my
the second line is the name
something like this
my
name
background is finished. How can the text be changed into the above format? it cannot be realized
.<div class="circle fl">
<div></div>
<div></div>
</div>.message-board .circle {
border-radius: 10px;
border-style: solid;
border-width: 10px;
border-bottom-color: red;
border-left-color: green;
border-right-color: blue;
border-top-color: yellow;
height: 0px;
width: 0px;
/**/
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
box-sizing: content-box;
} 