添加向外弯曲边框到像这样的元素:◝◟___◞◜ [英] Add outward curving border to elements like this: ◝◟___◞◜
问题描述
问题
我的导航栏看起来像这样:
HTML strong>
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 =#>首页< / a> < / li> < li> < a href =#>随机< / a> < / li> < li> < a href =#>博客< / a> < / li> < li> < a href =#>关于我们< / a> < / li> < li> < a href =#>与我们联系< / a> < / li> < / ul>< / nav>
/ h2>
在上图中,列表项博客被关注或悬停。在悬停样式中,它的边框半径为5像素。问题是,我希望在悬停时向左弯曲的顶部左右角落,如下所示:
我可以使用背景图片实现这个结果,并使用位置样式和z-index。我想要一个CSS border-only 解决方案。
PS
(至少对我来说),但我只想知道这是否可以做。
/ * 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;位置:相对; 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;}
/ pre>< nav> < ul> < li>首页< / li> < li>随机< / li> < li>博客< / li> < li>关于我们< / li> < li>联系我们< / li> < / ul>< / nav>
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 picture, the list item blog is focused or hovered. In hover style, it has a border-radius of 5px. The problem is that I want the top left and right corners, when hovered, to curve outwards like this :
I am able to achieve this result using background image, and also using position styles and z-index. I wanted a CSS border-only solution.
P.S.
The desired output may look undesirable (at least to me), but I just wanted to know if this could be done.
From the top of my head: draw bottom half border on the element and draw top-left and top-right borders on positioned pseudo elements.
/* 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>
这篇关于添加向外弯曲边框到像这样的元素:◝◟___◞◜的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!