Surround Content with Rotated Container

Question

Surround Content with Rotated Container

I'm trying to achieve a unique layout where the heading is rotated with CSS transform rotation, and I want the body text to flow around the rotated text.

The issue I'm facing is that when I apply float: left to the heading, the text wraps around the unrotated heading first before it actually rotates, causing overlap in the text.

Currently, here is an example of how my system is set up:

<html>
    <h1 style="transform: rotate(-60deg); float:left">
        Test Heading
    </h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam metus, mollis eu purus vitae, semper fermentum nunc. Phasellus nec iaculis sem, in imperdiet eros. Maecenas ligula nibh, elementum in felis eget, vehicula faucibus nibh. Morbi rhoncus vehicula feugiat. Pellentesque vitae lobortis arcu. Nullam vel mi elementum mi feugiat vehicula. Cras tincidunt purus dolor, eleifend aliquet velit ornare tristique. Maecenas lobortis tristique est, sed facilisis lectus pulvinar vestibulum. Nunc tristique tellus non facilisis elementum. Nam lobortis in velit non tempus. Phasellus lobortis vel neque non iaculis. Praesent tristique risus a gravida imperdiet. Quisque fringilla, massa quis placerat congue, nulla velit varius nisi, vel fermentum tortor velit ut nibh.
    </p>
</html>

Here is a goal behavior screenshot for reference: https://i.sstatic.net/O9yR8.png

html css

Answer 1

Answer №1

If you want to enhance the appearance of the <h1> tag, consider adding some margin.

Here's an example:

<html>
<h1 style="transform: rotate(-60deg); float:left; margin:3em 2em;">
    Test Heading
</h1>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit... (text truncated for brevity)
</p>

Answer 2

If you want to enhance the appearance of the <h1> tag, consider adding some margin.

Here's an example:

<html>
<h1 style="transform: rotate(-60deg); float:left; margin:3em 2em;">
    Test Heading
</h1>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit... (text truncated for brevity)
</p>

Answer 3

Answer №2

If you're looking to adjust the height, consider incorporating a :before element,

For more detailed examples, take a look at this resource -

Please review this code snippet below:

<html>
  <h1>
    Test Heading
  </h1>
  <p>
        Lorem ipsum dolor sit amet...
  </p>
</html>

h1 {
   display: inline-block;
   white-space: nowrap;
   transform: translate(0,90%) rotate(-60deg);
   transform-origin: 0 0;
   float: left;
}
h1:before {
   content: "";
   float: left;
   margin-top: 100%;
}

You can also view a live example here - http://jsfiddle.net/nudv9z43

Answer 4

If you're looking to adjust the height, consider incorporating a :before element,

For more detailed examples, take a look at this resource -

Please review this code snippet below:

<html>
  <h1>
    Test Heading
  </h1>
  <p>
        Lorem ipsum dolor sit amet...
  </p>
</html>

h1 {
   display: inline-block;
   white-space: nowrap;
   transform: translate(0,90%) rotate(-60deg);
   transform-origin: 0 0;
   float: left;
}
h1:before {
   content: "";
   float: left;
   margin-top: 100%;
}

You can also view a live example here - http://jsfiddle.net/nudv9z43

Answer 5

Answer №3

Introducing a clever "hack" involving triangles that may be beneficial -

<html>
  <div class="wrap">
  <h1>
    Test Heading Y
  </h1>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
  <div class="five"></div>
  <p>
        HLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam metus, mollis eu purus vitae, semper fermentum nunc. Phasellus nec iaculis sem, in imperdiet eros. Maecenas ligula nibh, elementum in felis eget, vehicula faucibus nibh. Morbi rhoncus vehicula feugiat. Pellentesque vitae lobortis arcu... <a href="#" rel="nofollow noreferrer">Read More</a>
   </p>
  </div>
</html>

h1 {
   display: inline-block;
   white-space: nowrap;
   transform: translate(0,90%) rotate(-25deg);
   transform-origin: 0 0;
   position: absolute;
   left: 0;
   top: 22px;
}
.wrap {
  position: relative;
}
.wrap > div {
  height: 22px;
  float: left;
  width: 250px;
  clear: both;
}
.wrap .two {
  width: 200px;
}
.wrap .three {
  width: 150px;
}
.wrap .four {
  width: 100px;
}
.wrap .five {
  width: 50px;
}

http://jsfiddle.net/nudv9z43/20/

Answer 6

Introducing a clever "hack" involving triangles that may be beneficial -

<html>
  <div class="wrap">
  <h1>
    Test Heading Y
  </h1>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
  <div class="five"></div>
  <p>
        HLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam metus, mollis eu purus vitae, semper fermentum nunc. Phasellus nec iaculis sem, in imperdiet eros. Maecenas ligula nibh, elementum in felis eget, vehicula faucibus nibh. Morbi rhoncus vehicula feugiat. Pellentesque vitae lobortis arcu... <a href="#" rel="nofollow noreferrer">Read More</a>
   </p>
  </div>
</html>

h1 {
   display: inline-block;
   white-space: nowrap;
   transform: translate(0,90%) rotate(-25deg);
   transform-origin: 0 0;
   position: absolute;
   left: 0;
   top: 22px;
}
.wrap {
  position: relative;
}
.wrap > div {
  height: 22px;
  float: left;
  width: 250px;
  clear: both;
}
.wrap .two {
  width: 200px;
}
.wrap .three {
  width: 150px;
}
.wrap .four {
  width: 100px;
}
.wrap .five {
  width: 50px;
}

http://jsfiddle.net/nudv9z43/20/

Surround Content with Rotated Container

Answer №1

Answer №2

Answer №3

Similar questions

What value does the "left" property default to?

How can I retrieve the URL for a specific location on Google Maps using latitude and longitude coordinates?

Working with CSS3 transitions in PHPStorm is a breeze

jQuery UI Tabs - The initial slide is not being displayed automatically

What is the best way to create a close button using JavaScript?

Dynamic JavaScript Banner Rotation

Problematic Mouse Position Detection in FireFox

Unable to view HTML without an internet connection

Tips for organizing the outcome of a seamless web scraping operation with Apify and Puppeteer

Tips for ensuring perfect alignment of all <TD> elements in a table

Struggling to align your image properly?

How can I eliminate the gap above the footer in iframes alignment?

Using jQuery to iterate through an array and reverse its order

Update the parent node in the Google Org Chart

Combining and removing identical values in JavaScript

Pictures displayed in a bootstrap carousel are not completely filling up the entire carousel space

What is the best way to position a div on top of another within a container using Bootstrap?

Having trouble adjusting the width and height of images to a full 100% scale

Even after setting [attr.disabled]="false" in Angular, the Textarea still remains disabled

Unable to render a child div completely opaque using the opacity attribute