What is the best way to generate a tilted slant with text positioned next to it?

.image {
  min-height: 100vh;
}

.bg-image {
  background-image: url('https://picsum.photos/1440/900');
  background-size: cover;
  background-position: center;
}
<!--About Us -->
<div class="container-fluid">
  <div class="row no-gutter">
    <div class="d-none d-md-flex col-md-4 col-lg-6 bg-image"></div>
    <div class="col-md-8 col-lg-6 remove-padding">
      <div class="page d-flex align-items-center py-5">
        <div class="container">
          <div class="row">
            <div class="col-md-9 col-lg-8 mx-auto">
              <h1 class="heading">About Us</h1>
              <p class="content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
              <p class="content">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
                desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              </p>
              <p class="contents">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
                desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
              </p>
              <a href="#" class="button">
                <button class="btn btn-primary" type="button" name="button">Click here</button>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I am exploring ways to achieve a angled border design, utilizing skew property without success. For reference, please check out this image: https://i.sstatic.net/p3wEQ.png

Answer №1

Take a look at this useful guide to help you get started:

To achieve an angled effect, create a div with the specified dimensions and insert your text or header inside it. Use a linear-gradient background with the desired degree of angle.

#AboutUs {
  height: 30px;
  width:500px;
  background: linear-gradient(105deg, #DC8700 25%, #EDEDED 25%);
  border-style:dashed;
}
#text{
  margin-left:150px;
  height: 30px;
  width:190px;
  font-weight:bold;
  font-size:20px;
}
   <div id="AboutUs">
      <div id="text">About Us</div>
   </div>   

I hope this information proves helpful for you.

Answer №2

If you're looking to spice up your design using skewX, consider this approach by simply replacing the h1 with a class named heading in your HTML code:

<div class="about-heading">
   <div class="brown-skew"></div>
   <h1 class="heading">About Us</h1>
</div>

Don't forget to add the following CSS styles as well:

.about-heading {
    height: 48px;
    display: flex;
    overflow: hidden;
    align-items: center;
}

.brown-skew {
    background-color: #DC8700;
    height: 4em;
    width: 6em;
    transform: skewX(-20deg);
    position: relative;
    left: -20px;
}

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

Creating an internal link to navigate to a specific element ID within another Angular component

Seeking Solution I am facing a challenge in using an internal link within the <a> tag to navigate to a specific section of another component by HTML ID. My Exploration First, I visited this site: https://www.w3schools.com/html/html_links.asp bu ...

What is the best way to incorporate text below grid columns in html?

Can you show me how to insert text below a column using the grid system? Here is what I am trying to accomplish Here is the code I have created: .grid{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 240px 240px; row-g ...

How to retrieve the image source using jQuery

<img src="../img/arnold.png" alt="Arnold"> Is there a way to retrieve the absolute path of this image using jQuery? Currently, when I use img.attr("src"), it only returns "../img/arnold.png", but I need it to return something like "http://site.com/ ...

Appending a forward slash at the end of a URL seamlessly directs the user to a serendipitous webpage experience, while

I'm currently developing a project on this website: Interestingly, when you append a forward slash to the end of the URL, all the images mysteriously disappear. Consequently, I am unable to include Google AdWords tracking code at the end of any URLs: ...

The div is not completely encased by the fieldset

I have utilized fieldset to generate a titled border around a div. Here is the code snippet: <div class="form-group col-xs-12"> <fieldset class="field_set col-xs-12"> <legend style="font-weight:bold;font-size:20px"> ...

Issue encountered while using Material-UI makeStyles: unable to access property 'down' due to being undefined

I'm currently in the process of developing my own website using Material-UI and I'm facing an issue with making it responsive. My goal is to hide an image on smaller screens by utilizing [theme.breakpoints.down('md')]. However, I keep e ...

Assigning a value using HTML code causes the input to malfunction

Trying to create a website with the goal of updating the database is proving to be challenging. The issue lies in the fact that some attributes from the database are in HTML format. Whenever I attempt to set an input's value to match the current attri ...

unable to interpret information

I've encountered an issue with posting data to my webpage (page3.php). Despite using $test=$_POST['radio_second']; on the page, the test variable remains empty. Any help in resolving this would be greatly appreciated. Thank you! <p> ...

How can I stack one column beneath two columns in a unique format?

I am looking to create a layout similar to the one depicted below. https://i.sstatic.net/m1aCj.png The window is represented by the red box, and the black boxes represent the <div> elements. I have attempted to arrange the image into two columns, bu ...

Header stabilization on scroll

On my webpage, I have a table header positioned in the middle of the page. However, due to the length of the page, I am looking for a way to make the header stay fixed at the top of the browser as the user scrolls down. My query is: Is there a method to k ...

Transmit form data via Ajax request

Thank you for your interest. I am looking to retrieve $_POST['Division'] from a dropdown list: <select name="Division" onchange="setImage2(this);"> <option value="1">Bronze</option> <option value="2">Silver</op ...

Implementing a dynamic top navbar that transitions to the side on desktop with Bootstrap

I have been faced with the challenge of creating a responsive navigation bar that appears at the top on mobile devices and on the side on desktops. The issue arises when considering how to structure the rows and columns to achieve this. For mobile views, ...

Breaking the link from the image it is connected to using [middleman] css and html

My question is about an icon with a link attached to it. <%= link_to image_tag("infobutton_circle_blue.png") ,"http://redbullrecords.com/artist/awolnation/", :id => "about" %> After applying styles, the link may not work properly: <a id="abo ...

JQuery will only run after the Alert has been triggered in Firefox

I am currently facing an issue with updating the 'like' count in my database using the 'changeRating()' method when a user interacts with local like, Facebook like, or Twitter buttons. Oddly enough, the 'likes' are not being ...

Experiencing difficulty in rendering API within React component

Trying to display an image from a specific API that I came across here. However, encountering the following error in the console... Error with Fetch API: TypeError - this.state.dogs.map is not functioning properly. Code snippet provided below: <htm ...

Bootstrap: adaptable card design

I am currently working on replicating a card design similar to this one from WIX using bootstrap. I encountered 2 issues: Initially, the card only touches the contact bar at full screen. However, as I reduce the size of the screen, the card begins to floa ...

Issue with Vue's v-autocomplete component not clearing the user's typed text when an item is selected from

I have implemented a vue v-autocomplete component on my page. I am unsure if the current behavior is as expected, as I cannot find similar examples demonstrating this functionality. The issue arises when a user begins typing in text and the autocomplete ...

Show using foreach, with a modification of the spacing between rows and columns

For my project, I need to display the same image 24 times with a 3x8 matrix on an A4 size page using a foreach method. The issue I'm encountering is that I have to manually add space between each row and column, but it cannot cause the page to break. ...

Show a variety of pictures in a random arrangement?

Looking for some help here! I'm trying to shuffle my images in a random order each time the page is refreshed. It's like a game of musical chairs but with pictures! Does anyone know how to achieve this? I've done some searching, but haven& ...

An inclusive CSS-compatible calendar control for ASP.NET

I am currently using the Calendar control provided by .NET but I have encountered issues with how it renders HTML in certain situations. Unfortunately, this is hard-coded and cannot be changed. It seems that the Calendar control has not been updated in .NE ...