html - 使标题下划线时尚的不同方法是什么？

Question

我想做与下面相同的事情，但使用 CSS 的方式不同。

.container {
  width: 100%;
  padding: 50px;
  display: block;
}

h2 {
  font-size: 35px;
  line-height: 1.2;
  margin: 0;
  width: 500px;
}

.heading-border {
  position: relative;
  background: url('https://i.ibb.co/PM2s0mj/green-shape.png');
  background-size: 100% 8px;
  background-position: bottom;
  background-repeat: no-repeat;
}

.heading-border:before {
  content: ' ';
  background: #fff;
  height: 13px;
  width: 12px;
  display: inline-block;
  margin: 0px 0px -8px -6px;
  transform: rotate(-45deg);
}

.heading-border:after {
  content: ' ';
  background: #fff;
  height: 13px;
  width: 12px;
  display: inline-block;
  margin: 0px -6px -17px 0;
  transform: rotate(-45deg);
}

<div class="container">
  <h2>This is heading <span class='heading-border'>this is stylish heading line</span></h2>
</div>

当我使用背景颜色时会发生这种情况 http://prntscr.com/ny8uog

我想要的东西与我在上面的代码中提到的相同，但方式不同，所以如果我将在标题后面使用背景色，那么补丁应该不可见。

Answer 1

使用像下面这样的背景，你可以很容易地控制线条的 Angular 、颜色和尺寸:

.container {
  width: 100%;
  padding: 50px;
  display: block;
}

h2 {
  font-size: 35px;
  line-height: 1.2;
  margin: 0;
  width: 500px;
}

.heading-border {
  background: 
    linear-gradient(-225deg,transparent 5px, pink 0) bottom left, /*225 = 180 + 45 */
    linear-gradient(-45deg ,transparent 5px, pink 0) bottom right;
  background-size: 51% 7px;
  background-repeat: no-repeat;
}


body {
 background:linear-gradient(to right,yellow,blue);
}

<div class="container">
  <h2>This is heading <span class='heading-border'>this is stylish heading line</span></h2>
</div>