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

Question

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

我想过使用显示块的标题和使用背景图像和背景重复属性，但我不知道如何在下划线的右侧设置紫色装饰元素。

任何帮助表示感谢，谢谢！

Answer 1

您可以使用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 2

您有几种选择来实现这一目标：

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 3

我不知道，你怎么可以完全使用CSS实现这一双边框效果，但在一定程度上，这是可能的。 或者你可以使用多个图像，甚至是一个完整的图像的边界和重复它。

注意：在类的下方给出1px border-bottom会带来与图像类似的边框效果。

* { 
 
    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; 
 
}

<div class="container"> 
 

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

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-color是一个很好的解决方案。我会考虑将图像编码到HTML，并避免将其作为背景图像。原因是你需要一个包含图像的元素的硬件高度（或最小高度），并且今天的网络可以在具有硬件高度或宽度的多个设备上使用，这可能是一种负面体验，并且更好避免，IMO。

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

至于布局的话，你可以构建它作为2张独立的图像，将每个图像转换成一个div和风格display:table-cell;包装/容器DIV W/display:table;里面，把width:100%;边界图像在整个容器伸展并将小装饰图像推向右侧。

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