具有非矩形标题的Bootstrap响应式导航栏

Question

我正在网站上工作，我在考虑是否可以创建一个以非矩形标题为背景的引导导航栏。

页眉应类似于以下内容：

您能提出一些想法，我如何实现这一目标

Answer 1

执行此操作的一种方法是使用：before和：after选择器，请参见此处的示例：

https://jsfiddle.net/9ej68c05/

HTML：

<div class="header">
  <h1>Company</h1>
</div>

CSS：

body {
  padding:0;
  margin:0;
}
.header {
  position:relative;
  width:100%;
  background-color:#cc4f4f;
  padding:16px;
}
.header:before {
  content:"";
  position:absolute;
  top:100%;
  left:0;
  width:100px;
  height:20px;
  background-color:#cc4f4f;
}
.header:after {
  content:"";
  position:absolute;
  top:100%;
  left:100px;
  border:15px solid #cc4f4f;
  border-bottom:5px solid transparent;
  border-right:40px solid transparent;
}
.header h1 {
  color:#FFF;
  font-size:20px;
}

：before选择器创建一个实心块，而：after选择器使用混合边框创建一个倾斜块。在每个宽度/高度为0px的元素上添加边框并更改某些侧面的颜色可以使您创建倾斜效果，因为每个边框都是从单个点出来的。

您可以在以下位置找到有关：before /：after选择器的更多信息：
https://css-tricks.com/almanac/selectors/a/after-and-before/