Question

我想利用引导导航栏创建以下内容：

但是我遇到了一些麻烦-特别是红条末端的歪斜。问题是，理想情况下，我希望在引导程序container中使用标题“ Apps Account”，以便将其缩进到页面的中间，但是然后我的彩色标题不能很好地播放，因为它不是从页面的侧面开始的屏幕。

如何制作此标头？

我已经尝试了以下方法：

CSS：

.row {
    position: relative;
    height:50px;
    overflow: hidden;
}

.col-4 {
    background-color: #df1010;
}

.col-4 h2 {
    text-align:right;
}

.col-1 {
    width: 100%;
    height: 100%;
    background-color: #df1010;
    transform: skewY(-45deg);
    transform-origin: top left;
}

HTML：

<div class="row">
    <div class="col-4"><h2>Apps Account</h2></div>
    <div class="col-1"></div>
</div>

但这有两个主要问题：

必须在父div上设置height，否则根本不会显示倾斜。理想情况下，它将基于内容。
当缩小到移动设备尺寸时，缩放比例不是很好，歪斜不会在各个角落间发生。

Answer 1

只需使用:before方法添加红色背景角度形状。（可选）根据您的要求调整width:40%。

.angle-bg {
    position: relative;
    height: 50px;    
}
.angle-bg:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: #df1010;
    transform: skew(-30deg);
}
.case-item-header {
    margin: 12px 8px 14px;
    font-size: 18px;
    color: #fff;
    text-align: right;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row angle-bg">
  <div class="col-6">
    <h3 class="case-item-header">Apps Account</h3>
  </div>
</div>

Answer 2

避免如此模棱两可地设置引导类的样式，当您稍后尝试重用它们时，很可能会遇到问题。

有很多方法可以获取您想要的东西，我的看法如下：

使用h2元素创建一个伪元素，该元素位于其后方，倾斜，填充和拉伸以充当红色背景。
将整个内容包装在一个隐藏任何溢出的元素中，以防止您的伪元素脱离主页主体：

#top{
  overflow: hidden;
}

#top h2{
  color: #fff;
  font-size: 1.6rem;
  position: relative;
  padding: .8rem 0;
}

#top h2::before{
  background-color: #df1010;
  bottom: 0;
  content: ' ';
  left: -9999rem;
  position: absolute;
  right: 0;
  transform-origin: 100% 0;
  transform: skew(-40deg);
  top: 0;
  z-index: -1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="top">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-4">
        <h2>
          Apps Account
        </h2>
      </div>
    </div>
  </div>
</div>

我已经修改了引导程序列类，以防止标题在其他设备上换行，但是您当然可以更改它们以满足您的需求。

Answer 3

我提出了使用默认引导程序类的解决方案。如果您想要一个覆盖整个页面的容器，引导程序会提供.container-fluid CSS类。

使用col-xs-*和col-sm-*时要牢记响应能力。您只需调整不同屏幕尺寸的行的百分比即可。

对于角落，无需使用任何转换。您可以使用边框获得类似这样的简单形状，以获得所需的外观。值得一读的主题是The Shapes of CSS。可以通过操纵border-right的大小来更改拐角的陡度。

.nopadding {
  /* override bootstrap column padding*/
   padding: 0 !important;
   margin: 0 !important;
}

.title {
  height: 50px;
  color: white;
  background-color: #df1010;
}

.title h2 {
  /* override bootstrap header classes*/
  line-height: 1em;
  margin: 10px 0;
}

.corner {
  width: 0;
  height: 0;
  border-top: 50px solid #df1010;
  border-right: 50px solid transparent;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8 col-sm-6 text-right title nopadding">
      <h2>Apps Account</h2>
    </div>
    <div class="col-xs-4 col-sm-6 nopadding">
      <div class="corner"></div>
    </div>
  </div>
</div>

不幸的是，这并没有消除父对象的高度定义。但这解决了您的屏幕尺寸问题。

在引导程序中创建带角度的标头

3 个答案: