Question

在下图中，您可以看到我想用HTML和CSS实现的一些紫色标题。当然，标题可以是任意的。我很难适当创建紫色标题的自定义下划线。

我想过使用显示块作为标题并使用background-image和background-repeat属性，但我不知道如何在下划线右侧设置紫色装饰元素。

感谢任何帮助，谢谢！

Answer 1

您可以通过以下几种方式实现此目标：

1）multiple background images

将装饰元素声明为第二个背景图像，并将其置于右侧，不再重复。

浏览器支持：very good

2）border-image

您可以按原样拍摄图像并将其声明为边框图像。

浏览器支持：good (with some exceptions)

3）pseudo element

使用具有装饰元素作为背景图像的伪元素，并将其放置在下角。

浏览器支持：excellent - all browsers support this (even down to IE8)

Answer 2

您可以使用CSS :before和:after选择器的组合，以及fontAwesome来实现这一目标。看看我的例子并根据需要进行调整。

h1 {
    display: block;
    border-bottom: solid 1px #6B1E69;
    position: relative;
    width: 450px;
    color: #6B1E69;
}
h1:after {
    content: '';
    width: 100%;
    height: 25px;
    position: absolute;
    border-bottom: solid 3px #6B1E69;
    margin-bottom: -5px;
    bottom: 0;
    left: 0;
}



h1:before {
    content: '\f18c';
    font-family: fontAwesome;
    height: 25px;
    position: absolute;
    margin-bottom: -10px;
    bottom: 0;
    right: -30px;
    text-align: right;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1> Thi sis your header text</h1>

Answer 3

我不知道如何使用CSS完全实现双边框效果，但在某种程度上，这是可能的。或者您可以使用多个图像，甚至是完整的边框图像并重复它。

注意：给.under类提供了1px border-bottom，以带来与图像类似的边框效果。

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 80%;
  margin: 0 auto;
}
.heading {
  color: purple;
  margin: 10px 0 15px;
}
.under {
  width: 98%;
  display:block;
  position: relative;
  border-bottom: 1px solid purple;
}
.under:after,
.under:before {
  content: '';
  position: absolute;
  margin-top:2px;
  top: 100%;
}
.under:after {
  border-bottom: 3px solid purple;
  width: 98%;
  display: block;
  z-index: 10;
  left: 0;
}
.under:before {
  background: #fff url('http://i.stack.imgur.com/SHc6G.png')no-repeat right top;
  width: 33px;
  height: 28px;
  display: block;
  right: 0;
  top: 100%;
  left: auto;
  float: right;
  margin-top: -11px;
  z-index: 100;
}

＆＃13;

<div class="container">

  <h1 class="heading under">
Some heading
</h1>
</div>

＆＃13;

Answer 4

这是我最接近纯粹的html和css而没有图像

*{box-sizing:border-box;}
.container {
    padding-right:30px;
    position:relative;
    width:300px
}
h2 {
    color:purple;
    border-bottom:1px solid purple;
    padding:bottom:5px;
    margin-bottom:1px;
}
.line {
    height:3px;
    background-color:purple;
    margin:0;
    position:relative;
}
.line:after {
    width: 6px; 
    height: 6px; 
    background: white;
    border:4px solid purple;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px;
    position:absolute;
        right: -20px;
    bottom: -5px;
    z-index: 100;
    content: "";
}
.line:before {
    width: 16px; 
    height: 16px; 
    background: white;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px;
    position:absolute;
        right: -22px;
    bottom: -6px;
    z-index: 100;
    content: "";
}
.shape { 
    width: 10px; 
    height: 10px; 
    background: purple; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;
    position:absolute;
    z-index: 100;
    position:absolute;
    right:0px;
    bottom:0px;
} 
.shape:before { 
    width: 10px; 
    height: 10px; 
    background: purple; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;
    position:absolute;
    left:0px;
    top:5px;
    z-index: 100;
    content: "";
}

.shape:after { 
    width: 10px; 
    height: 10px; 
    background: purple; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;
    position:absolute;
    left: 5px;
    top: 2px;
    z-index: 100;
    content: "";
    transform: scale(1,0.8);
}

<div class="container">
   <h2>You header</h2>
    <div class="shape"></div>
    <div class="line"></div>
    
</div>

Answer 5

使用带有后备图像的SVG +固体bg颜色是一个很好的解决方案。我会考虑将图像编码到HTML中，并避免将其作为背景图像。原因是你需要一个硬设置高度（或最小高度）的元素包含图像和今天的网络可用于具有硬设置高度或宽度的多个设备可能是负面的体验，是更好的关闭，IMO。

将图像作为块级元素（或内联块）运行将为您提供宽度灵活性，而不会出现显示问题或额外样式。

就布局而言，您可以将其构建为2个单独的图像，将每个图像放入div中，并使用display:table-cell;在包装器/容器div中放置display:table; w width:100%;，放置{{1在边框图像上伸展容器并将小装饰图像向右推。

This is a good thread for opinions on how to handle the image; css bg vs. inline.

CSS - 使用特殊下划线创建标题

5 个答案: