CSS更好的样式标题元素

Question

请帮帮我。如何使用CSS切角，现在插入为背景图像background: url(../images/border.png) no-repeat center;

HTML code：

<div class="heading">
   <h1>About Us</h1>
</div>

CSS代码：

.heading {
    text-transform: uppercase;
    position: relative;
    background: #000000
}

.heading h1 {
  text-align: center;
  overflow: hidden;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 30px/32px 'Roboto', sans-serif;
    padding: 100px 0;;
    background: url(../images/border.png) no-repeat center;
}
.heading h1:before,
.heading h1:after {
  content: '';
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid;
  height: 0;
  vertical-align: middle;
}
.heading h1:before {
  margin-left: -100%;
  margin-right: 80px;
}
.heading h1:after {
  margin-left: 80px;
  margin-right: -100%;
}

Answer 1

您可以尝试线性渐变并转换demo to play with

＆＃13;

＆＃13;

header {
  background: #333;
  display: flex;
  color: white;
}
header:before,
header:after {
  content: '';
  margin: auto 1em;
  border-bottom: solid 1px;
  flex: 1;
}
h1 {
  position: relative;
  padding: 0.25em 1em;
  overflow: hidden;
  background: linear-gradient(white, white) no-repeat top center, linear-gradient(white, white) no-repeat bottom center;
  background-size: calc(100% - 1.7em) 1px;
}
h1:before,
h1:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: solid 1px;
  border-top: none;
  border-bottom: none;
  transform: skew(45deg)
}
h1:after {
  transform: skew(-45deg)
}

＆＃13;

<header>
  <h1>about us </h1>
</header>

＆＃13;

＆＃13;

＆＃13;

您可以使用currentcolor轻松更改文字和文字。边框颜色：

＆＃13;

＆＃13;

header {
  background: #333;
  display: flex;
  color: white;
}
header + header {
  color: pink;
}
header + header + header {
  color: gold;
}
header:before,
header:after {
  content: '';
  margin: auto 1em;
  border-bottom: solid 1px;
  flex: 1;
}
h1 {
  position: relative;
  padding: 0.25em 1em;
  overflow: hidden;
  background: linear-gradient(currentcolor, currentcolor) no-repeat top center, linear-gradient(currentcolor, currentcolor) no-repeat bottom center;
  background-size: calc(100% - 1.65em) 1px;
}
h1:before,
h1:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: solid 1px;
  border-top: none;
  border-bottom: none;
  transform: skew(45deg)
}
h1:after {
  transform: skew(-45deg)
}

＆＃13;

<header>
  <h1>about us </h1>
</header>
<header>
  <h1>about us a bit longer</h1>
</header>
<header>
  <h1>& different color</h1>
</header>

＆＃13;

＆＃13;

＆＃13;