Add an outward curved border to these elements: ◝◟ ___ ◞◜
Problem
My navbar looks like this:
HTML and CSS
nav {
width: 1040px;
}
nav ul {
display: block;
list-style-type: none;
height: 40px;
border-top: 3px solid #222;
}
nav ul li {
width: 130px;
display: inline-block;
line-height: 40px;
text-align: center;
font-size: 16px;
font-family: Vollkorn;
font-weight: 400;
}
nav ul li a {
display: block;
text-decoration: none;
color: #333;
}
nav ul li a:hover,
nav ul li a:focus {
color: #000;
box-shadow: 0px 0px 2px black;
border-radius: 10px;
border: 2px solid #222;
border-top: 0px;
transition: 0.2s ease all;
}
<nav>
<ul>
<li><a href="#">Home</a>
</li>
<li>
<a href="#">Random</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</nav>
Desired output
In the above image, the blog list item is focused or freezes. In hover style, it has a border radius of 5 pixels. The problem is, I want the top left and right corners to bend like this when they hover:
I can achieve this result using a background image and also using position and z-index styles. I wanted to use CSS for borders only .
PS
The desired result may look unwanted (at least to me), but I just wanted to know if it could be done.
source to share
From the top of my head: Draw the bottom half of the element's border and draw top-left and top-right borders at the pseudo element positions.
/* using 4px border, 1em border radius, 1em padding */
nav ul {
font: medium sans-serif;
text-align: center;
padding: 0;
list-style-type: none;
border-top: 4px solid;
}
nav li {
display: inline-block;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-radius: 0 0 1em 1em;
padding: 0 1em 1em;
position: relative;
top: 1em;
}
nav li:before,
nav li:after {
display: none;
content: "";
position: absolute;
top: -1em;
width: 1em;
height: 1em;
margin-top: -4px;
}
nav li:before {
right: 100%;
border-top: 4px solid;
border-right: 4px solid;
border-top-right-radius: 1em;
}
nav li:after {
left: 100%;
border-top: 4px solid;
border-left: 4px solid;
border-top-left-radius: 1em;
}
nav li:hover {
border-color: initial;
}
nav li:hover:before,
nav li:hover:after {
display: block;
}
<nav>
<ul>
<li>Home</li>
<li>Random</li>
<li>Blog</li>
<li>About us</li>
<li>Contact Us</li>
</ul>
</nav>
source to share
I have a rather hackish solution if you want to call it that. This use of pseudo-elements ::before
and ::after
for creating invisible rectangles in the upper left and right corners of the active reference (hang or out of focus) with a radius of the border, set with the right margin.
nav {
width: 1040px;
}
nav ul {
display: block;
list-style-type: none;
height: 40px;
border-top: 3px solid #222;
}
nav ul li {
width: 130px;
display: inline-block;
line-height: 30px;
padding-top: 10px;
text-align: center;
font-size: 16px;
font-family: Vollkorn;
font-weight: 400;
}
nav ul li a {
display: block;
text-decoration: none;
color: #333;
position: relative;
}
nav ul li a::before, nav ul li a::after {
box-sizing: border-box;
border-top: 2px solid #000;
content: '';
opacity: 0;
position: absolute;
top: -12px;
width: 12px;
height: 12px;
}
nav ul li a::before {
border-top-right-radius: 10px;
border-right: 2px solid #000;
right: 100%;
}
nav ul li a::after {
border-top-left-radius: 10px;
border-left: 2px solid #000;
left: 100%;
}
nav ul li a:hover,
nav ul li a:focus {
color: #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 2px solid #222;
border-top: none;
}
nav ul li a:hover::before, nav ul li a:hover::after,
nav ul li a:focus::before, nav ul li a:focus::after {
opacity: 1;
}
<nav>
<ul>
<li><a href="#">Home</a>
</li>
<li>
<a href="#">Random</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</nav>
source to share
Yes, it is quite possible:
#a{
margin-top: 25px;
position: relative;
overflow: visible;
white-space: nowrap;
text-align: center;
border: 3px solid black;
border-top: none;
border-radius: 0 0 25px 25px;
margin-left: 25px;
height: 50px;
}
#a, #a:after, #a:before{
box-sizing: border-box;
display: inline-block;
}
#a:after, #a:before{
position: absolute;
width: 25px;
height: 25px;
content: ".";
color: transparent;
border: 3px solid black;
border-bottom: none;
top: -25px;
}
#a:before{
border-left: none;
border-top-right-radius: 25px;
left: -25px;
}
#a:after{
border-right: none;
border-top-left-radius: 25px;
right: -25px;
}
<div id="a">Hello</div>
Or to simplify the stylesheet with LESS:
#a {
@round-width: 25px;
@border-style: 3px solid black;
@offset: -@round-width;
&, &:after, &:before {
box-sizing: border-box;
display: inline-block;
}
position: relative;
overflow: visible;
white-space: nowrap;
text-align: center;
border: @border-style;
border-top: none;
border-radius: 0 0 @round-width @round-width;
margin-left: @round-width;
height: 50px;
&:after, &:before {
position: absolute;
width: @round-width;
height: @round-width;
color: transparent;
content: ".";
border: @border-style;
border-bottom: none;
top: @offset;
}
&:before {
border-left: none;
border-top-right-radius: @round-width;
left: @offset;
}
&:after {
border-right: none;
border-top-left-radius: @round-width;
right: @offset;
}
}
The good thing about LESS is that you only mention the base selector ( #a
) once, and so for the width.
source to share