Css 在引导中创建一个有角度的头部

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

但我有一点小麻烦-特别是在红条末端的倾斜。问题是，理想情况下，我希望标题“Apps Account”位于引导

容器中，这样它就缩进到页面的中间，但是我的彩色标题显示不好，因为它不是从屏幕的侧面开始的

我怎样才能做这个标题呢

首先，我尝试了以下方法：

CSS:

HTML:

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


应用程序帐户

但这有两个主要问题：

必须在父div上设置
高度
，否则将根本不显示倾斜。理想情况下，它将基于内容

当缩小到手机尺寸时，它的伸缩性不是很好，倾斜不会从一个角到另一个角

只需使用
：before
方法添加红色背景角形状。根据您的要求，可以选择调整
宽度：40%


.angle bg{
位置：相对位置；
高度：50px；
}
.角度背景：之前{
内容：“；
位置：绝对位置；
排名：0；
底部：0；
宽度：50%；
背景#df1010；
变换：倾斜（-30度）；
}
.案例项目标题{
利润率：12px 8px 14px；
字号：18px；
颜色：#fff；
文本对齐：右对齐；
}

应用程序帐户
避免对引导类进行如此模糊的样式设置，在以后尝试重用它们时可能会遇到问题

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


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


#顶部{
溢出：隐藏；
}
#顶部h2{
颜色：#fff；
字体大小：1.6rem；
位置：相对位置；
填充：.8rem 0；
}
#前h2：：前{
背景色：#df1010；
底部：0；
内容：''；
左：-9999雷姆；
位置：绝对位置；
右：0；
变换原点：100%0；
变换：倾斜（-40度）；
排名：0；
z指数：-1；
}

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

使用
col xs-*
和
col sm-*
时需要考虑响应性。您可以简单地根据不同的屏幕大小调整行的百分比

对于角点，不需要使用转换。您可以使用边框实现这样的简单形状，以获得所需的外观。关于那个主题值得一读的一篇文章是。可以通过操纵右边框的大小来更改拐角的陡度


.nop添加{
/*重写引导列填充*/
填充：0！重要；
边距：0！重要；
}
.头衔{
高度：50px；
颜色：白色；
背景色：#df1010；
}
.标题h2{
/*重写引导头类*/
线高：1米；
利润率：10px0；
}
.拐角处{
宽度：0；
身高：0；
边框顶部：50px实心#df1010；
右边框：50px实心透明；
}

应用程序帐户
请分享您的想法，triedI打算提出类似的建议，只是我会在容器本身上保留
背景色
和
宽度
，并使用白色背景的伪元素（或背景色的任何颜色）进行倾斜。就像这个伟大的解决方案一样！您可以安全地从
中删除
高度：50px
这是巧合。如果我这样做，字体大小会改变，标题容器的大小也会改变，不再与角齐平。最初CSS是在样式标记之间内联发布的，我对其进行了编辑，以便更清晰。我个人认为，按照@Patrick的建议，使用伪元素来表示角度或边界形状是一个更好的经典解决方案，但是您的解决方案很好地解决了引导容器问题
<div class="row">
    <div class="col-4"><h2>Apps Account</h2></div>
    <div class="col-1"></div>
</div>