What is the best way to make a slanted text div?

After experimenting with different approaches, I'm curious to hear your opinions. Currently, I am utilizing floats to achieve a certain layout, but this method is hindering my ability to use flexbox for styling job postings on the right side. This is the design I am trying to create:

https://i.sstatic.net/YYUS0.jpg

Below is the CSS code I have worked on so far (codepen link provided at the bottom):

.home #slider .item {
    height: 560px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 1rem;
    background-attachment: fixed;
    background-position: cover;
    box-shadow: inset 0 0 0 1000px rgba(170, 0, 0, 0.4);
}

.home #slider .item #sliderTextContainer {
    height: 560px;
    float: left;
    width: 70%;
    margin-top: 0;
    -webkit-shape-outside: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    shape-outside: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.home #slider .item #sliderText {
    width:60%;
    align-self: center;
}

.home #slider .item .slide_title {
    font-family: Montserrat;
    font-size: 2em;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.home #slider .item .slide_title span {
    font-size: 2.3em;
    line-height: 1;
    font-family: Montserrat;
    font-weight: 600;
    padding-left: 135px;
    background-image: url(../../pages/home/img/woosh.png);
    background-repeat: no-repeat;
    background-position: left center;
}

.home #slider .item .slide_body {
    font-size: 1.5em;
    font-weight: 100;
}

.home #slider .item .btn-lg {
    padding: 12px 30px;
}

.home #slider .item #sliderJobsContainer {
    padding-right: 25px;
    height: 560px;
    background-color: rgb(214,214,214);
    clip-path: polygon(69% 0, 100% 0%, 100% 100%, 62% 100%);
}

.home #slider .item #sliderJobs {
    color: black;
}

CodePen Link

Your thoughts are welcome and appreciated!

htmlcss

Answer №1

To create this visual effect, you can utilize the linear-gradient() function along with the shape-outside property.

Check out the demonstration below:

.content {
  display: flex;
  background: linear-gradient(95deg, rgba(139, 0, 0, 0.8) 60%, grey 60%), url(https://loremflickr.com/2400/768/truck) no-repeat 0 0 /cover;
  height: 560px;
}

.info {
  flex: 1;
}

.jobs {
  width: 40%;
}

.jobs .shape {
  width: 3em;
  height: 100%;
  float: left;
  shape-outside: polygon(0 0, 100% 0, 0 100%);
}

body {
  margin: 0;
}
<div class="content">
  <div class="info">
  </div>

  <div class="jobs">
    <div class="shape"></div>
    <div class="job">
      <h5>TITLE</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla ipsa iusto eligendi eum libero ipsum, beatae debitis atque praesentium.</p>
    </div>

    <div class="job">
      <h5>TITLE</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla ipsa iusto eligendi eum libero ipsum, beatae debitis atque praesentium.</p>
    </div>
  </div>
  
  <div style="clear: both;"></div>
</div>

Answer №2

Due to the jagged line caused by the gradient, I had to opt for a different approach. Also, using a single container for all content prevented me from fixing the background image exclusively on the left side.

This is the modified code:

<div id="slider">
    <div id = "info">
        <div id="infoContainer">
            <p class="slide_title">
                Breaking New Ground<br /><span>Ahead.</span>
            </p>
            <p class="slide_body">
                Palumbo Trucking of Connecticut is a fast-growing family-owned and operated transportation company committed to providing dependable customer service, top-notch equipment, and highly skilled drivers.
            </p>
            <a class="btn btn-dark btn-lg" href="./?page=locations">GET A FREE QUOTE</a>  
        </div>  
    </div>

CSS:

<div id = "jobs">
    <a class = "job" href = "/?page=employment">
        <h5>CDL Class A Tractor Trailer Drivers</h5>
        <p>Must have 3 years experience and clean driving record. Experience with pneumatic tanks a plus, training is available.</p>
    </a>

    <hr>

    <a class = "job" href = "/?page=employment">
        <h5>CDL Class A Dump Trailer Driver</h5>
        <p>3 years experience and clean driving record.</p>
    </a>

    <hr>

    <a class = "job" href = "/?page=employment">
        <h5>Rail Yard Transloader</h5>
        <p>Yard master needed for New Haven and Wallingford locations to transload material from rail cars into pneumatic tanks. Monday through Saturday, 8-10 hours a day.</p>
    </a>

    <hr>

    <a class = "job" href = "/?page=employment">
        <h5>Fleet PM Service and Trailer Mechanic</h5>
        <p>Full time, various shifts available.</p>
    </a>
</div>

CSS:

.home #slider {
    background: #aa0000;
    border-bottom: 5px solid #FECA0B;
}

#infoContainer {
    width:60%;
    align-self: center;
}

#info {
    background-image: url('../../pages/home/img/bg-big-head.png');
    height: 560px;
    width: 70%;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 1rem;
    background-attachment: fixed;
    background-position: 0 80px;
    box-shadow: inset 0 0 0 1000px rgba(170, 0, 0, 0.4);
    float: left;
    -webkit-shape-outside: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    shape-outside: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    flex-direction: column;
    justify-content: center;
    text-align: center;
    -webkit-clip-path: polygon(0% 0%, 98% 0%, 85% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 98% 0%, 85% 100%, 0% 100%);
}

.home #slider #info .slide_title {
    font-family: Montserrat;
    font-size: 2em;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.home #slider #info .slide_title span {
    font-size: 2.3em;
    line-height: 1;
    font-family: Montserrat;
    font-weight: 600;
    padding-left: 135px;
    background-image: url(../../pages/home/img/woosh.png);
    background-repeat: no-repeat;
    background-position: left center;
}

.home #slider #info .slide_body {
    font-size: 1.5em;
    font-weight: 100;
}

.home #slider #info .btn-lg {
    padding: 12px 30px;
}

#jobs {
    color: black;
    padding-top: 60px;
    padding-right: 45px;
    height: 560px;
    background-color: rgb(214,214,214);
}

.job {
    margin-top:40px;
    text-decoration: none;
    color: black;
    display: block;
}

.job:hover {
    text-decoration: none;
    color: black;
}

#jobs a h5 {
    font-family: Montserrat;
    font-weight: bold;
}

#jobs p {
    color: #727272;
    font-weight: 400;
}

#jobs hr {
    position: absolute;
    right: 50px;
    margin:0;
}

#jobs hr:nth-of-type(1) {
    width: 29%;
}

#jobs hr:nth-of-type(2) {
    width: 30%;
}

#jobs hr:nth-of-type(3) {
    width: 31%;
}

.job:nth-of-type(1)  {
    margin-top:0;  
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on organizing items into rows with 3 columns through iteration

Click on the provided JSFiddle link to view a dropdown menu that filters items into categories. Each item is stored as an object in an array for its respective category. Currently, all items are displayed in one column and I want to divide them into three ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to create a new variable depending on the status of a button being disabled or enabled

Imagine a scenario where a button toggles between being disabled when the condition is false (opacity: 0.3) and enabled when the condition is true (opacity: 1). Let's set aside the actual condition for now -- what if I want to determine when the butt ...

javascriptcssreactjsnext.js

proper method for including file path in ajax

When accessing a file using Ajax that needs to include other files (.css, .js, .php, etc.), the full path must be defined, which can be quite confusing when there are multiple parent directories involved. Is there a way to start entering the path from the ...

phphtmlajax

Stop text from being selected across all browsers in Firefox

My current CSS includes: *{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } If you visit http://jsfiddle.net/KyF5x/ and click be ...

htmlcss

Keep the sub-menu in a kendo context menu from closing until the user either hovers over another menu item or clicks outside of the current item

Please take a look at this example: Due to the small size of sub-items, the sub-menu closes quickly when hovering over the menu and losing focus. My goal is to keep an opened sub-menu from closing until the user hovers over another menu item or clicks on ...

javascriptjqueryhtmlkendo-contextmenu

Resolving the issue of the 'Failed to load resource: net::ERR_FILE_NOT_FOUND' error

I'm encountering issues with loading my CSS in different browsers when using the "Copy Path" feature in VSCode. While everything displays correctly in preview mode within VS, none of the styles appear when pasting the path into Chrome or Edge. Below ...

htmlcssfile-not-found

What is the correct way to load a column of images without affecting the readability of the text alongside them? (see image below)

https://i.stack.imgur.com/rBL50.png Whenever my page loads, there is a card with a vertical list of images. Due to the loading time of the images, the text appears first and gets squished as shown in the provided screenshot. Is there a way for the text to ...

phphtmlcss

The clash of names between tags and classes in Tumblr themes can cause conflicts

I have discovered a method to customize the style of different posts based on their respective "#tags" using {TagsAsClasses}: <div class="post {TagsAsClasses}"> div.tag { /* customize styling here */ } While this approach works well, I encount ...

htmlcsstumblr

Leverage the power of jQuery to fetch data from a PHP script connected to a MySQL database

It might be a bit confusing, so let me clarify. I'm working on a form where users input a ticket and it gets assigned to a technician based on the service they offer. I have 3 text fields: username, email, and description of the problem. The next fie ...

javascriptphpjqueryhtmlmysql

AJAX response for form validation

I need to validate my contact form when the submit button is clicked. If all fields are valid, I want to display a Processing message using AJAX, followed by a success message with the entered name. The content of my Form is: <form onsubmit="return va ...

javascripthtmlajax

What is the best way to combine two menu plugins in Wordpress?

Currently, I am in the process of creating a logo with a drop down menu for my website, which can be found at . After discovering a widget called Menu Image that successfully transformed a menu item into a photo, I decided to add another widget called Ma ...

csswordpressplugins

How to Create Smooth Transitions for Text Arrays using jQuery's Fade In and Fade Out Features

I need to loop through an array of text and apply jQuery's fadeIn and fadeOut functions to each element. var greetings = ["hi, I'm", "bonjour, je m'appelle", "hallo, ich heiße"] The HTML structure I want is as follows: <h2><span ...

javascriptjqueryhtmlcssfadein

Tap the mobile menu button twice to toggle the menu

Incorporating: Visual Studio 2013, ASP.NET (VB) Webforms. Upgrading an existing WebForms website from .NET 2.0 to .NET 4.5 and implementing mobile-friendly features for better Google support. I have added a button to the top right corner as follows: < ...

javascripthtmlcss

Displaying PHP object in an HTML modal showcase

I'm attempting to display an object within an HTML modal. Since the structure is unknown beforehand, and child properties can also be objects or arrays, I thought a simple recursive function might be the solution, but I am uncertain. Here's what ...

phphtml

Trick for hiding CSS elements when input field is vacant

Is there a way to hide the search result when the input is empty? While everything is functioning correctly, I would like to prevent the search result from remaining visible after clearing the input field. For example, if you type 'A' and then d ...

htmlcss

Eliminate the excess padding from the Material UI textbox

I've been struggling to eliminate the padding from a textbox, but I'm facing an issue with Material UI. Even after setting padding to 0 for all classes, the padding persists. Could someone provide guidance on how to successfully remove this pad ...

javascripthtmlcssreactjsmaterial-ui

Ways to reach the standard look

Check out this follow-up to a previously posted issue. Click here to view it I am currently facing an issue with the code below, where I am unable to make the second button inherit the default border and padding styles. Any assistance would be greatly app ...

jquerycsshtmljquery-animate

Video posters can now feature a sleek black border to enhance the

How can I add a black border to a video poster? I've tried to work it out on my own, but I'm having trouble getting it to work. Thank you for any assistance... echo '<video id="video" width="300px" height="200px&q ...

css

Application of stroke-linecap in SVG limited to single end only

Can a linecap be added to only one end of a stroke, rather than both ends like in the default sample below? <?xml version="1.0"?> <svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> < ...

csssvgstroke

Experiencing trouble with implementing multiple textboxes based on option selection using javascript

My JavaScript code is supposed to display multiple textboxes based on the user's selection, but for some reason, I can only select one textbox at a time. I'm not sure what's wrong with my code. Here's the snippet of the code: <ht ...

javascriptphphtml