Question

我正在尝试为我的标头创建一个有创意的底部边框，但是我很努力。这就是我到目前为止所拥有的。

div {
  margin: 30px
}

h3.stat-page-section-header { 
  font-size: 40px;
  color: #000099;
  vertical-align: left;

  text-transform: uppercase;
  margin: 0px 0px 0px 45px;
}

hr.hr-style-2 {
  font-family: Arial, sans-serif; /* choose the font you like */
  // text-align: center; /* horizontal centering */
  line-height: 1px; /* vertical centering */
  height: 1px; /* gap between the lines */
  font-size: 1em; /* choose font size you like */
  border-bottom: 3px solid #000099;
  border-top: none;
  margin: 0px 10px 20px 10px; /* 20px space above/below, 10px left/right */
  overflow: visible;

  /* ensure 1px gap between borders */
  box-sizing: content-box;
}

hr.hr-style-2::after {
  content: "♦"; /* section sign */
  color: red;
  font-size: 40px;
  display: inline; /* for vertical centering and background knockout */
  padding: 0 0.5em; /* size of background color knockout */
}

<div>
  <h3 class='stat-page-section-header'>My Header Here</h3>
  <hr class='hr-style-2' />
</div>

但是，在我正在构建的应用程序中，我目前的这种方法并不好，主要是因为我在这里使用了单独的<h3>和<hr>，而如果这样做的话会更好。在border-bottom上以<h3>样式完成。

在造型上，我更喜欢钻石首先出现，然后出现3-6px的小间隙，然后是边框底，垂直居中，使边框底居中于钻石的情况。我也希望删除h3上的45px左边距。

任何帮助，将不胜感激！

Answer 1

这是一个只有背景的想法，您可以在h3上应用而无需额外的内容：

h3 { 
  font-size: 40px;
  color: #000099;
  text-transform: uppercase;
  padding: 0px 0px 20px 45px;
  background:
  
    /*Losange created by 4 triangles*/
    linear-gradient(to top right,transparent 49%,red 50%) left 30px bottom 0px/10px 15px,
    linear-gradient(to top left,transparent 49%,red 50%)  left 40px bottom 0px/10px 15px,
    linear-gradient(to bottom right,transparent 49%,red 50%) left 30px bottom 15px/10px 15px,
    linear-gradient(to bottom left,transparent 49%,red 50%)  left 40px bottom 15px/10px 15px,
  
    /*bottom border*/
    linear-gradient(currentColor,currentColor) left 60px bottom 13px/100% 3px;
  background-repeat:no-repeat;
}

<h3>Some text here</h3>

添加CSS变量以更好地控制尺寸和位置：

h3 { 
  --dh:15px; /*height of the diamond*/
  --dw:10px; /*width of the diamond*/
  --dp:30px; /*position of the diamond*/
  --b:3px; /*border bottom*/
  font-size: 40px;
  color: #000099;
  text-transform: uppercase;
  padding: 0px 0px calc(2*var(--dh)) 45px;
  margin:20px 0;
  background:
  
    /*Losange created by 4 triangles*/
    linear-gradient(to top right,transparent 49%,red 50%) left var(--dp) bottom 0px/var(--dw) var(--dh),
    linear-gradient(to top left,transparent 49%,red 50%)  left calc(var(--dp) + var(--dw)) bottom 0px/var(--dw) var(--dh),
    linear-gradient(to bottom right,transparent 49%,red 50%) left var(--dp) bottom var(--dh)/var(--dw) var(--dh),
    linear-gradient(to bottom left,transparent 49%,red 50%)  left calc(var(--dp) + var(--dw)) bottom var(--dh)/var(--dw) var(--dh),
  
    /*bottom border*/
    linear-gradient(currentColor,currentColor) left calc(var(--dp) + 2*var(--dw) + 6px) bottom calc(var(--dh) - var(--b)/2)/100% var(--b);
  background-repeat:no-repeat;
}

<h3>Some text here</h3>

<h3 style="--dh:20px;--dw:15px;--dp:70px;--b:4px"

>Some text here</h3>

Answer 2

这是您要寻找的吗？

使用底部边框
钻石与边框之间的间隙很小
钻石内联
删除左页边距

您需要在:after中添加边框，然后适当地定义其尺寸/边距

div {
  margin: 30px
}

h3.stat-page-section-header {
  display: inline-block;
  position: relative;
  font-size: 40px;
  color: #000099;
  vertical-align: left;
  text-transform: uppercase;
  margin: 0px 0px 0px 0px;
}

h3.stat-page-section-header:after {
  position: absolute;
  content: '';
  border-bottom: 3px solid #000099;
  width: 93%;
  transform: translateX(-47%);
  bottom: -15px;
  left: 50%;
}

div.hr-style-2 {
  font-family: Arial, sans-serif;
  /* choose the font you like */
  float: left;
  line-height: 1px;
  /* vertical centering */
  height: 1px;
  /* gap between the lines */
  font-size: 1em;
  /* choose font size you like */
  border-top: none;
  margin: 57px -20px 20px 0px;
  overflow: visible;
  /* ensure 1px gap between borders */
  box-sizing: content-box;
}

div.hr-style-2::before {
  content: "♦";
  /* section sign */
  color: red;
  font-size: 40px;
  display: inline;
  /* for vertical centering and background knockout */
}

<div>
  <h3 class='stat-page-section-header'>My Header Here</h3>
  <div class='hr-style-2' />
</div>

注意：这不适用于较小的视口。

方形/菱形的边框底部左侧样式

2 个答案: