I have a question regarding showing a text inside a div styled as a pin location.
I am new to css and react (this is a css question) and I want to display a value in a div tag which has a pin location style, this value is a number and can be one digit or more.
To style the pin the used the following:
export const Mark = styled.div(props=>({
transform:"rotateX(20deg) rotateY(-45deg),
borderRadius: "50% 50% 50% 0",
padding:"50% 50% 50% 50%",
left:"50%",
top:"50%",
textAlign:"center",
position:"absolute",
width:"100%",
height:"100%")}
I am using other div for the value since I do not want the content (the number) to be rotated
<Mark><div style={{transform:"rotate(45deg)", left:"50%", top:"50%"}}100</div></Mark>
What I want is that: if the number has more digit the mark will be larger so all the digits will be inside it, and if one digit the Mark will be smaller. the numbers should be in the center(I believe this is already done by left 50% and top 50%")
Is that possible using certain styling?