Enhance web design with dynamic size pseudo elements using only CSS, no

Question

Enhance web design with dynamic size pseudo elements using only CSS, no

Before the title, I've added a pseudo element with a slanted background. When the title is wrapped, it increases in height. I've been attempting to make the pseudo element adjust to the title's height, but haven't succeeded yet.

I've experimented with various combinations of flex / (inline)block and absolute positioning, but have not been able to make it function correctly.

I want it to be fully responsive without relying on JavaScript.

The image below shows the title when it consists of only one line:

Orange: background color of the title wrapper
Purple: pseudo element positioned in front of the title
Green: the title text

https://i.stack.imgur.com/AnFCE.png

When I resize the screen and the title wraps, it appears like this:

As seen in the image, the purple element is too small

https://i.stack.imgur.com/DS2AS.png

If I adjust the z-index, you can see the purple element: https://i.stack.imgur.com/peiIW.png

My desired outcome is for the purple element to always be at the left side of the title, covering the full height of the title to display the slanted effect. https://i.stack.imgur.com/Hegvt.png

.title {
  display: flex;
  background-color: orange;
}

.title::before {
  flex-shrink: 0;
  height: 100%;
  width: 50px;
  content: '';
  transform: skew(-22.5deg);
  transform-origin: 0 100%;
  background-color: purple;
}

.title span {
  background-color: green;
}

<div class="title">
  <span>Some text for the title</span>
</div>

html css pseudo-element

Answer 1

Answer №1

My innovative approach utilizes SVG vectors instead of pseudo elements to achieve the desired effect.

By adjusting the height of the .title element, you can maintain consistency in appearance.

.title {
  display: flex;
  background-color: green;
  position: relative;
  height: 50px;
  overflow: hidden;
}

.module_title span {
  background-color: green;
}

.title span {
  padding: 5px 60px;
  color: white;
}

svg {
  position: absolute;
  left: 0px;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8>
    <title>z</title>
    <link rel='stylesheet' href="/mysite/static/.other/z.css">
  </head>
  <body>

    <div class="title">
      <svg class="orange" width="80" viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon id="cover" points="0,100 0,0 50,0" style="fill: orange"></polygon>
      </svg>
      <svg class="purple" width="80" viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon id="cover" points="30,0 60,0 30,100 0,100" style="fill: purple"></polygon>
      </svg>
      <span>Some text for the title</span>
    </div>

  </body>
</html>

Answer 2

My innovative approach utilizes SVG vectors instead of pseudo elements to achieve the desired effect.

By adjusting the height of the .title element, you can maintain consistency in appearance.

.title {
  display: flex;
  background-color: green;
  position: relative;
  height: 50px;
  overflow: hidden;
}

.module_title span {
  background-color: green;
}

.title span {
  padding: 5px 60px;
  color: white;
}

svg {
  position: absolute;
  left: 0px;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8>
    <title>z</title>
    <link rel='stylesheet' href="/mysite/static/.other/z.css">
  </head>
  <body>

    <div class="title">
      <svg class="orange" width="80" viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon id="cover" points="0,100 0,0 50,0" style="fill: orange"></polygon>
      </svg>
      <svg class="purple" width="80" viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon id="cover" points="30,0 60,0 30,100 0,100" style="fill: purple"></polygon>
      </svg>
      <span>Some text for the title</span>
    </div>

  </body>
</html>

Answer 3

Answer №2

To implement the inherit value for height in your pseudo element, you can follow this example:

.header:before {
  flex-grow: 0;
  height: inherit;
  width: 70px;
  content: '';
  transform: rotate(-30deg);
  transform-origin: top left;
  background-color: blue;
}

Answer 4

To implement the inherit value for height in your pseudo element, you can follow this example:

.header:before {
  flex-grow: 0;
  height: inherit;
  width: 70px;
  content: '';
  transform: rotate(-30deg);
  transform-origin: top left;
  background-color: blue;
}

Answer 5

Answer №3

While I appreciate @RobKwasowski's approach, achieving this effect does not necessarily require svg. Most of the styles used here are similar to yours, except I opted not to utilize flex. It is worth noting that the .title contains

position:relative;overflow:hidden;

. The reason for using position:relative; is to position the before element with position:absolute;, while overflow:hidden; ensures any extra content is clipped.

I trust this solution proves helpful.

.title {
  background-color: orange;
  padding:0 0 0 3em;
  position:relative;
  overflow:hidden;
}

.title::before {  
  display:block;
  position:absolute;
  top:0;left:0;
  height: 100%;
  width: 50px;
  content: '';
  transform: skew(-22.5deg);
  transform-origin: 0 100%;
  background-color: purple;
}

.title span {
  display:inline-block;
  padding:2em 0 2em 5em;
  width:100%;
  background-color: green;
}

<div class="title">
  <span>Some text for the title<br>Some text for the title<br>Some text for the title</span>
</div>

Answer 6

While I appreciate @RobKwasowski's approach, achieving this effect does not necessarily require svg. Most of the styles used here are similar to yours, except I opted not to utilize flex. It is worth noting that the .title contains

position:relative;overflow:hidden;

. The reason for using position:relative; is to position the before element with position:absolute;, while overflow:hidden; ensures any extra content is clipped.

I trust this solution proves helpful.

.title {
  background-color: orange;
  padding:0 0 0 3em;
  position:relative;
  overflow:hidden;
}

.title::before {  
  display:block;
  position:absolute;
  top:0;left:0;
  height: 100%;
  width: 50px;
  content: '';
  transform: skew(-22.5deg);
  transform-origin: 0 100%;
  background-color: purple;
}

.title span {
  display:inline-block;
  padding:2em 0 2em 5em;
  width:100%;
  background-color: green;
}

<div class="title">
  <span>Some text for the title<br>Some text for the title<br>Some text for the title</span>
</div>

Enhance web design with dynamic size pseudo elements using only CSS, no

Answer №1

Answer №2

Answer №3

Similar questions

The HTMLEditor from ASP.NET AJAX Control Toolkit is not appearing correctly on the page

Resolving issues with JavaScript caused by Polymer updates

What could be causing my website to extend beyond 100% width?

Is it possible to merge two HTML selectors using jQuery?

What causes <input> elements to vertically center when using the same technique for centering <span> elements? (The line-height of <input> does not match its parent's height)

How to Align position:relative Divs Horizontally Using CSS

Is there a way to maintain the selected position on the drop-down menu for users?

Arrange the table in alphabetical order and categorize it

The custom classes I have created in Material UI are being overshadowed by the default classes provided by Material UI

In an HTML document, you may encounter whitespace that is not present in JSFiddle

Using Angular JS to retrieve specific information from a JSON file

The background image in the hovering textbox shifts and changes size

Is there a way to make my HTML file search beyond its current directory?

Utilize JavaScript to target the specific CSS class

The responsiveness of Slick Slider's breakpoints is malfunctioning

Tips for presenting random images from an assortment of pictures on a webpage

Click event not triggering to update image

Obtaining the text of a span tag within a div using Selenium in C#

Choose the field and set the default value

Can you explain the contrast between onsubmit="submitForm();" and onsubmit="return submitForm();"?