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

更改:before的{{1}}和:after伪元素的颜色，使其与背景颜色匹配，如下所示：

heading-border

请参见以下示例：

.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);
}

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);
}

标题强调时尚有什么不同的方法？

3 个答案: