使用 CSS Bootstrap 3 制作斜线

在 CSS Bootstrap 3 中，制作斜线可以使用伪元素 :before 和 :after 以及 transform 属性来实现。下面介绍一种简单的方法。

步骤

1. 在 HTML 文档中加入需要斜线的元素，如 <div> 或 <span> 等，并给其添加一个类名，如 slant。

<div class="slant"></div>

2. 在 CSS 样式表中，针对该类名添加样式。

.slant {
  position: relative;
}

3. 使用伪元素 :before 和 :after 来制作斜线。

.slant:before,
.slant:after {
  content: "";
  position: absolute;
  background: #000;
  height: 2px;
  width: 50%;
  top: 50%;
  transform: translateY(-50%);
}

4. 为 :before 和 :after 增加 transform 属性，分别使其斜向左和斜向右。

.slant:before {
  left: 0;
  transform: translateY(-50%) rotate(-45deg);
}
.slant:after {
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}

5. 最终样式如下：

.slant {
  position: relative;
}
.slant:before,
.slant:after {
  content: "";
  position: absolute;
  background: #000;
  height: 2px;
  width: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.slant:before {
  left: 0;
  transform: translateY(-50%) rotate(-45deg);
}
.slant:after {
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}

参考链接

• How to Create Slanted Divs with CSS
• Bootstrap 3 documentation: Pseudo-elements