Text align horizontally inside diamond vertically

Question

I have Created diamond successfully by using following code

CSS:

 .diamond {
      height: 75px;
      width: 75px;
      border-radius:15px;
      transform: rotate(45deg);
      float: left;
      margin-left: 18%;
      font-size:50px;
      color: white;
      font-family:Adequate-ExtraLight;
    }

    <div class="diamond" style="background-color:#ff4d4d">48</div>

produced output by above code has tilted text, but I want to make text horizontally. I tried but failed. Could any one please tell me how to achieve this.

This is likely a duplicate.Please check this link https://stackoverflow.com/questions/47656487/css-transparent-gold-background/47657748#47657748 — CodeZombie, Jan 27 '18 at 10:00

Nihal · Answer 1 · 2018-01-27T09:35:31.963

.diamond {
      height: 75px;
      width: 75px;
      border-radius:15px;
      transform: rotate(45deg);
      float: left;
      margin-left: 18%;
      font-size:50px;
      color: white;
      font-family:Adequate-ExtraLight;
    }
    .content{
    transform: rotate(-45deg);
    }

    <div class="diamond" style="background-color:#ff4d4d">
    <div class="content">
    48
    </div>
    </div>

or you can make absolute position of div to make that happen, also can be done by z index in css

.diamond { 
      position: absolute;
      height: 75px;
      width: 75px;
      border-radius:15px;
      transform: rotate(45deg);
      float: left;
      margin-left: 18%;
      font-size:50px;
      color: white;
      font-family:Adequate-ExtraLight;
    }
   .content{
   position: absolute;
    height: 75px;
      width: 75px;
      border-radius:15px;
      float: left;
      margin-left: 20%;
      font-size:50px;
      color: white;
      font-family:Adequate-ExtraLight;
   }

<div>
<div class="diamond" style="background-color:#ff4d4d">
    </div>
    <div class="content">
    48
    </div>
</div>

score 0 · Answer 2 · answered Jan 27 '18 at 09:30

<div class="diamond" style="background-color:#ff4d4d">
  <div class="text-inside-diamond">48</div>
</div>

.text-inside-diamond {
  transform: rotate(-45deg);
  margin-left: 10%;
}

the margin-left of the inside class is just to center the div your diamond class stays the way it is.

Text align horizontally inside diamond vertically

2 Answers2