Ways of incorporating text in a parallelogram shape

Question

Ways of incorporating text in a parallelogram shape

Here is the HTML code with ID attributes applied to both divs:

<div id="herotext">
        <div id="banner"></div>
        <h1 id="maintitle">Hey, I'm Charlie</h1>
        <p>This website contains basic HTML and CSS</p>
    </div>

And here is the corresponding CSS with styles targeting the divs:

#herotext {
    position: absolute;
    text-align : center;
}
#banner {
    position: absolute;
    width: 700px;
    height: 350px;
    transform: skew(20deg);
    background: #555;
    left: 50%;
    margin-left: -15%;
}

html css

Answer 1

Answer №1

Check out this versatile code snippet!

.container{
  padding: 100px;
}
.box {
  position: relative;
  margin: 100px;
  min-width:400px;
}
.cover {
  background: #555;
  transform: skew(20deg);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index:-1;
}
.text {
  padding:50px
}

<div class="container">
  <div class="box">
  <div class="cover">
  </div>
  <div class="text">
    <h1>Hey, I'm Charlie</h1>
    <p>This website contains basic HTML and CSS</p>
  </div>
</div>
</div>

Answer 2

Check out this versatile code snippet!

.container{
  padding: 100px;
}
.box {
  position: relative;
  margin: 100px;
  min-width:400px;
}
.cover {
  background: #555;
  transform: skew(20deg);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index:-1;
}
.text {
  padding:50px
}

<div class="container">
  <div class="box">
  <div class="cover">
  </div>
  <div class="text">
    <h1>Hey, I'm Charlie</h1>
    <p>This website contains basic HTML and CSS</p>
  </div>
</div>
</div>

Answer 3

Answer №2

Here is a code snippet demonstrating one way to style elements using CSS transformations:

.box {
      position: relative;
      padding: 50px;
    }
    .cover {
      width: 400px;
      height: 250px;
      background: #555;
      transform: skew(20deg);
    }
    .text {
      transform: skew(-20deg);
      padding: 50px;
    }

<div class="box">
  <div class="cover">
    <div class="text">
      <h1>Hey, I'm Charlie</h1>
      <p>This website contains basic HTML and CSS</p>
    </div>
  </div>
</div>

Answer 4

Here is a code snippet demonstrating one way to style elements using CSS transformations:

.box {
      position: relative;
      padding: 50px;
    }
    .cover {
      width: 400px;
      height: 250px;
      background: #555;
      transform: skew(20deg);
    }
    .text {
      transform: skew(-20deg);
      padding: 50px;
    }

<div class="box">
  <div class="cover">
    <div class="text">
      <h1>Hey, I'm Charlie</h1>
      <p>This website contains basic HTML and CSS</p>
    </div>
  </div>
</div>

Ways of incorporating text in a parallelogram shape

Answer №1

Answer №2

Similar questions

The font weight is failing to take effect

retrieving data from a database to populate selection options using PHP

Enable hovering only on the actual content within the box, not on the empty space

Overlap and cover additional elements within a DIV

Are the site-wide navigation links working on one page but not the other?

Disallow the use of punctuation marks such as dots, plus signs, minus signs, and the letter 'e' when entering

Fixed navbar at the bottom of the page that transitions to static when scrolling reaches a certain location

Strategies for optimizing progressive enhancement

Is it possible to simultaneously run watchify and node-sass watch together?

Is Html.Raw necessary for handling ragged html generated by Razor?

Tips on hiding the menu toggler in PrimeNg

Adding margin padding to a Material UI Navbar: Step-by-step guide

position blocks next to each other within a container

How can I arrange the "elements" within a bootstrap container?

Verifying that the class name prefix aligns with the folder name using Stylelint

Overcoming Troublesome Login Input Box in Web

Calculating totals in real-time with JavaScript for a dynamic PHP and HTML form that includes quantity,

Cease the use of the jQuery.css() method

How can I detect a DOM element mutation based on a CSS selector, and if this is possible, how can it be accomplished?

the content outside of the division is incorrectly formatted