'How to create slanted underline style
I'm trying to achieve this underline style using CSS. It needs to work on text with multiple lines. Has anyone got any ideas?
Solution 1:[1]
Here is an idea that rely on box-decoration-break and background coloration:
p > span {
background:
linear-gradient(-225deg,#0000 10px,red 10px) bottom left,
linear-gradient(-45deg ,#0000 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>Without box-decoration-break you can have a more supported way but will not tight to the text, it will simply consider the number of lines.
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>Solution 2:[2]
Temani Afif has provided a clean way to implement this - if anything my answer is proving it is a lot more complex to achieve the same results in the way I did it.
Here is my suggestion:
* {
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>Create a div that will contain the colour of your underline, then produce a before and after to add your flicks.
If you utilise flex-box well you can get it to be the width of your title too.
Edit
An implementation that will work across multiple lines - you will need to include the spans and underlines per line-break. I will have a go now to produce this without using the div with a class of underline.
Here I use jQuery to put the underlines in, you just need to break your heading into sections using the spans:
(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>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | halfer |