How can I create a angled slant and heading text beside on it?

user_3351708 0
Viewed 46

.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 trying to do the angled border design, I tried using the skew but it doesn't work on my design . Please refer to this line of code below:

enter image description here

twitter-bootstrap user-interface css html
2 Answers

Check this out, this may help you to get going:

Create a div on the below mentioned kind and add your text or header within, what you need to use for the angled thing is linear-gradient and with the deg of how much angled you need.

#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>

Hope this helps.

user_35643590

This is how I would do it using skewX by just replacing the h1 with class heading in your code with :

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

and also to the css add :

.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;
}
user_129781620
Related