负边框(css) [英] Negative borders (css)
本文介绍了负边框(css)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我知道如何用css制作一个看起来像这样的边框:
I know how to make a border with css that looks like this:
___________
_/ \_
/ \
| |
| |
但是有可能制作一个看起来像这样的边框:
But is there a possibility to make a border that looks like that:
|\_ _/|
| \___________/ |
| |
| |
提前谢谢!
推荐答案
使用带有框阴影的伪元素的解决方案:
A solution using a pseudo element with a box-shadow:
div {
background: orange;
width: 400px;
height: 40px;
margin-top: 100px;
z-index: 1;
position: relative;
}
div:after {
content: "";
position: absolute;
height: 100px;
left: 0px;
right: 0px;
bottom: 100%;
background-color: transparent;
border-bottom-left-radius: 50% 70px;
border-bottom-right-radius: 50% 70px;
box-shadow: 0px 0px 0px 100px orange;
clip: rect(0px, 400px, 100px, 0px);
}
这篇关于负边框(css)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文