使標題下划線時尚的不同方法是什么？

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

更改heading-border的:before和:after偽元素的顏色以匹配背景顏色，如下所示：

.heading-border:before {
  content: ' ';
  background: #a09898; /* <--- change to bg color */
  ...
}

.heading-border:after {
  content: ' ';
  background: #a09898; /* <--- change to bg color */
  ...
}

請參閱下面的示例：

 .container { width: 100%; padding: 50px; display: block; background-color: #a09898; } 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: #a09898; height: 13px; width: 12px; display: inline-block; margin: 0px 0px -8px -6px; transform: rotate(-45deg); } .heading-border:after { content: ' '; background: #a09898; 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>

Answer 2

我認為這對你有用！！！

 .stylish-underline{ border-bottom: solid 8px #fbd2d7!important; border-radius: 0px; border: solid 8px transparent; } .container { width: 100%; padding: 50px; display: block; } h2 { font-size: 35px; line-height: 1.2; margin: 0; width: 500px; display: contents; } .right-arrow{ width: 0px; background: #fbd2d7; height: 0px; display: -webkit-inline-box; border: solid 8px transparent; border-right: solid 8px #fff; border-bottom: none; position: absolute; margin-top: 40px; margin-left: -15px; } @-moz-document url-prefix() { .right-arrow{ width: 0px; background: #fbd2d7; height: 0px; display: -webkit-inline-box; border: solid 8px transparent; border-right: solid 8px #fff; border-bottom: none; position: absolute; margin-top: 41px; margin-left: -15px; } }

 <div class="container"> <h2>This is heading <span class="stylish-underline"> this is stylish <br> heading line</span></h2> <div class="right-arrow"> </div> </div>

Answer 3

使用如下背景，您可以輕松控制線條的角度、顏色和尺寸：

 .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>