时间戳

首页 > 解决方案 > 如何使用css显示文本旋转？

html - 如何使用css显示文本旋转？

问题描述

我有以下问题： - 我想旋转如图所示的文本 - 在这里，我正在尝试在以下代码中执行此操作 谁能为我提供解决方案？ 

div {
  width: 200px;
  height: 30px;
  background-color: yellow;
  border: 1px solid black;
  margin-top:20px;
}

div#myDiv {
  -ms-transform: rotate(315deg); 
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg); 
}
<html>
<head>
<style>

</style>
</head>
<body>

<div id="myDiv">
This div element is rotated .
</div>
<div id="myDiv">
This div element is rotated .
</div>
<div id="myDiv">
This div element is rotated .
</div>

</body>
</html>

我想设置像“演示文本”这样的文本，如图所示：

我想设置文本

标签： htmlcssdesign-patterns

解决方案

这是我旋转文本的解决方案。它对所有设备都有响应。

.main {
  display: flex;
  margin: 4rem auto;
}

div#myDiv {
  background-color: black;
  flex: 0 0 20%;
  text-align: center;
  color: white;
  border: 1px solid black;
  padding: 10px 0;
  -ms-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}
<html>

<head>
  <style>

  </style>
</head>

<body>
  <div class="main">
    <div id="myDiv">
      Demo Text
    </div>
    <div id="myDiv">
      Demo Text
    </div>
    <div id="myDiv">
      Demo Text
    </div>
    <div id="myDiv">
      Demo Text
    </div>
    <div id="myDiv">
      Demo Text
    </div>
  </div>


</body>

</html>

推荐阅读