如何在它旁边创建一个倾斜的斜率和标题文本?

.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 边界设计,我尝试使用偏差,但它不适用于我的设计。请参阅下面的代码行:

enter image description here

边界边界About UsOnly?ManJuboyz
耶稣,那种设计。jarcena

回答 2

  1. 赞同 3

    检查这一点,这可能会帮助您进入:

    下面提到的div并添加您的文本或添加文本headerWithin,你需要用来倾斜的东西是linear-gradient和我们一起deg你需要多少角度。

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

    希望这有帮助。

    ManJuboyz
    I am glad! would you accept it as answer and vote if you think it is worth doing?Manjuboyz
  2. 赞同 1

    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>
    

    也向CSS添加:

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

    Redjanvier
    我很感激有助于为答案提供投票。Redjanvier