CODEWITHSUNDEEP
htmlcssdesign-patterns
dhrupal suthar
dhrupal suthar

Reputation: 70

how to show text rotate using css?

I have the following issues: - I want to rotate text as shown in image - Here, I am trying to do this in the following code Can anyone please provide me with a solution? 

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>

I want to set text like "demo text" as shown in the image:

i want set text like "demo text" show in image

Upvotes: 2

Views: 81

Answers (4)

Sanjay Kumar N S
Sanjay Kumar N S

Reputation: 4739

First of all giving same id to more than one html element is invalid. I replaced that with the class and used the corresponding selector in the css as well and added more styles there.

Try this:

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

.myDiv {
  -ms-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
  display: inline !important;
  float: left;
  width: 200px !important;
}
<div class="myDiv">
  This div element is rotated .
</div>
<div class="myDiv">
  This div element is rotated .
</div>
<div class="myDiv">
  This div element is rotated .
</div>

Upvotes: 0

Chintan
Chintan

Reputation: 87

Here is my solution to rotate text. It is responsive for all devices.

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

Upvotes: 1

Nick Parsons
Nick Parsons

Reputation: 50704

You can display: inline-block on your divs and set the transform-origin to right.

See example below:

div#myDiv {
  width: 200px;
  height: 30px;
  background-color: yellow;
  border: 1px solid black;
  margin-top: 20px;
  display: inline-block; /* add display: inline-block */
}

div#myDiv {
  transform: rotate(315deg);
  transform-origin: right;
}
<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>

Upvotes: 1

Vaibhav Chauhan
Vaibhav Chauhan

Reputation: 360

I think you should use flex for more dynamic nature of your code If u want to build something exactly the way in the image u have shared then, first enclose your elements into a container 

<div class="container">

elem 1

elem 2

elem 3

</div>

where container will have display flex

flex direction will be row create a grid if u want to ease out your work, u can use bootstrap 4 grid as well its flex based

once grid is set place you elements and transform rotate to whatever angle you want, that should be the approach flex will place ur elements and also smoothly(default animation) re-arrange when screen is resized with just few lines of code.. try to work around and update. Hope this will guide you

Upvotes: 0

Related Questions