Question

我使用以下代码

成功创建了钻石

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>

上面代码产生的输出有倾斜的文字，但我想横向制作文字。我试过但失败了。任何人都可以告诉我如何实现这一点。

Answer 1

＆＃13;

<body>
<p id = "demo">fffffffff</p>
<button onclick = "fun()">click</button>
<script type="text/javascript" defer = "defer">
    function fun(){
    alert(document.getElementById("demo").innerHTML);
}   
</script>
</body>`

＆＃13;

.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);
    }

＆＃13;

或者你可以使div的绝对位置发生，也可以通过css中的z索引来完成

＆＃13;

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

＆＃13;

.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;
   }

＆＃13;

Answer 2

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

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

内部类的左边距只是以div为中心你的钻石类保持原样。

文本在菱形内垂直对齐

2 个答案: