如何创建倾斜的下划线样式

时间：2019-05-03 10:55:03

标签： css

我正在尝试使用CSS实现这种下划线样式。它需要处理多行文本。有人知道吗？

2 个答案:

答案 0 :(得分：2)

这是一个依靠box-decoration-break和背景色的想法：

p > span {
 background:
   linear-gradient(-225deg,transparent 10px,red 10px) bottom left,
   linear-gradient(-45deg ,transparent 10px,red 10px) bottom right;
 background-size:60% 10px;
 background-repeat:no-repeat;
 padding:0 15px 5px;
 -webkit-box-decoration-break: clone;
 box-decoration-break: clone; 
 
 font-size:25px;
 font-weight:bold;
}
<p><span>Lorem ipsum dolor sit amet, <br>consectetur adipiscing elit. Nunc purus lectus, gravida in gravida non, consequat i</span></p>

<p><span>Lorem ipsum dolor</span></p>

如果没有box-decoration-break，您可以采用一种更受支持的方式，但不会紧紧限制文本，它只会考虑行数。

p {
 background:
   repeating-linear-gradient(to bottom,#fff 0 calc(1.2em - 10px),transparent calc(1.2em - 10px) 1.2em),
   linear-gradient(-225deg,transparent 1.2em,red 0) bottom left/60% 1.2em,
   linear-gradient(-45deg ,transparent 1.2em,red 0) bottom right/60% 1.2em;
 background-repeat:repeat-y;
 padding:0 20px;
 line-height:1.2em;
 
 font-size:25px;
 font-weight:bold;
}
<p><span>Lorem ipsum dolor sit amet, <br>consectetur adipiscing elit. Nunc purus lectus, gravida in gravida non, consequat i</span></p>

<p><span>Lorem ipsum dolor</span></p>

答案 1 :(得分：-1)

Temani Afif提供了一种干净的方法来实现此目的-如果我的回答证明有什么问题，以我的方式实现相同的结果要复杂得多...

这是我的建议：

	* {
		box-sizing: border-box;
	}

	.example {
		width: 100%;
		max-width: 1248px;
		margin: 0 auto;
		padding: 20px;
		background-color: red;
		position: relative;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

		.contain {
			padding: 20px;
			background-color: red;
			position: relative;
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
		}

			h1 {
				text-align: center;
				font-size: 36px;
				line-height: 40px;
				position: relative;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-flex-wrap: wrap;
				flex-wrap: wrap;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
			}

				h1 span {
					margin-bottom: 10px;
					position: relative;
					display: -webkit-box;
					display: -moz-box;
					display: -ms-flexbox;
					display: -webkit-flex;
					display: flex;
					-webkit-flex-wrap: wrap;
					flex-wrap: wrap;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
				}
					h1 span .underline {
						width: calc(100% - 20px);
						height: 10px;
						position: absolute;
						top: 100%;
						background-color: white;

					}
						h1 span .underline:before {
							content: '';
							width: 0px;
							height: 0px;
							position: absolute;
							top: 0;
							left: -10px;

							background-color: transparent;
							border-style: solid;
							border-width: 5px;
							border-color: transparent black black transparent; 
						}
						h1 span .underline:after {
							content: '';
							width: 0px;
							height: 0px;
							position: absolute;
							top: 0;
							right: -10px;

							background-color: transparent;
							border-style: solid;
							border-width: 5px;
							border-color: black transparent transparent black; 
						}
	<div class="example">
		<div class="contain">
			<h1>
				<span>Hello World<div class="underline"></div></span>
				<span>Hello Human<div class="underline"></div></span>
				<span>Hello Alien?<div class="underline"></div></span>
				<span>No, Hello AI!<div class="underline"></div></span>
			</h1>
			<div class="underline"></div>
		</div>
		<div class="contain">
			<h1>
				<span>Hello World<div class="underline"></div></span>
				<span>Hello Human<div class="underline"></div></span>
				<span>Hello Alien?<div class="underline"></div></span>
				<span>No, Hello AI!<div class="underline"></div></span>
			</h1>
			<div class="underline"></div>
		</div>
		<div class="contain">
			<h1>
				<span>Hello World<div class="underline"></div></span>
				<span>Hello Human<div class="underline"></div></span>
				<span>Hello Alien?<div class="underline"></div></span>
				<span>No, Hello AI!<div class="underline"></div></span>
			</h1>
			<div class="underline"></div>
		</div>
		<div class="contain">
			<h1>
				<span>Hello World<div class="underline"></div></span>
				<span>Hello Human<div class="underline"></div></span>
				<span>Hello Alien?<div class="underline"></div></span>
				<span>No, Hello AI!<div class="underline"></div></span>
			</h1>
			<div class="underline"></div>
		</div>
	</div>

创建一个将包含下划线颜色的div，然后在添加前后笔触之前和之后制作一个

。

如果您善用弹性盒，您也可以将其设为标题的宽度。

编辑：可以跨多行工作的实现-您需要包括每个换行符的跨度和下划线。现在，我可以不使用带有下划线类的div来生成此代码。

在这里，我使用jQuery来添加下划线，您只需要使用跨度将标题分成几部分：

	(function ($) {

		$( 'span' ).append( '<div class="underline"></div>' );

	})(jQuery);
	* {
		box-sizing: border-box;
	}

	.example {
		width: 100%;
		max-width: 1248px;
		margin: 0 auto;
		padding: 20px;
		background-color: red;
		position: relative;
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

		.contain {
			padding: 20px;
			background-color: red;
			position: relative;
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
		}

			h1 {
				text-align: center;
				font-size: 36px;
				line-height: 40px;
				position: relative;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-flex-wrap: wrap;
				flex-wrap: wrap;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
			}

				h1 span {
					margin-bottom: 10px;
					position: relative;
					display: -webkit-box;
					display: -moz-box;
					display: -ms-flexbox;
					display: -webkit-flex;
					display: flex;
					-webkit-flex-wrap: wrap;
					flex-wrap: wrap;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
				}
					h1 span .underline {
						width: calc(100% - 20px);
						height: 10px;
						position: absolute;
						top: 100%;
						background-color: white;

					}
						h1 span .underline:before {
							content: '';
							width: 0px;
							height: 0px;
							position: absolute;
							top: 0;
							left: -10px;

							background-color: transparent;
							border-style: solid;
							border-width: 5px;
							border-color: transparent black black transparent; 
						}
						h1 span .underline:after {
							content: '';
							width: 0px;
							height: 0px;
							position: absolute;
							top: 0;
							right: -10px;

							background-color: transparent;
							border-style: solid;
							border-width: 5px;
							border-color: black transparent transparent black; 
						}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<div class="example">
		<div class="contain">
			<h1>
				<span>Hello World</span>
				<span>Hello Human</span>
				<span>Hello Alien?</span>
				<span>No, Hello AI!</span>
			</h1>
			<div class="underline"></div>
		</div>
		<div class="contain">
			<h1>
				<span>Hello World</span>
				<span>Hello Human</span>
				<span>Hello Alien?</span>
				<span>No, Hello AI!</span>
			</h1>
			<div class="underline"></div>
		</div>
		<div class="contain">
			<h1>
				<span>Hello World</span>
				<span>Hello Human</span>
				<span>Hello Alien?</span>
				<span>No, Hello AI!</span>
			</h1>
			<div class="underline"></div>
		</div>
		<div class="contain">
			<h1>
				<span>Hello World</span>
				<span>Hello Human</span>
				<span>Hello Alien?</span>
				<span>No, Hello AI!</span>
			</h1>
			<div class="underline"></div>
		</div>
	</div>

希望这些帮助，杰森。

相关问题
最新问题