如何在CSS的梯形內插入文本？

Question

您能告訴我如何在CSS的梯形內插入文本嗎？ 其實我很喜歡

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="container">
         <div id="triangle-topleft">
404
         </div>

     </div>
</body>
</html>

CSS

 #container {
     width:200px;
    }
   #triangle-topleft {
       width: 200px;
       height: 0;
       border-top: 100px solid #ccc;
       border-right: 200px solid transparent;
   }

我希望404文本應顯示在梯形內。

這是我的代碼

https://jsbin.com/gucuviqigi/edit?html,css,output

Answer 1

這是我的答案。

您可以按Top =％的方式播放，而按％的方向向左移動即可：)

不要忘記將其標記為已接受：

  #container { width:200px; } #triangle-topleft { width: 200px; height: 0; border-top: 100px solid #ccc; border-right: 200px solid transparent; } .number { position: absolute; top: 20%; left: 20%; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="container"> <div id="triangle-topleft"> <div class="number"> 404 </div> </div> </div> </div> </body>

如何在CSS的梯形內插入文本？

問題描述

1 個解決方案

解決方案1
0 2017-05-14 00:21:13

如何在CSS的梯形內插入文本？

問題描述

1 個解決方案

解決方案1 0 2017-05-14 00:21:13

解決方案1
0 2017-05-14 00:21:13