<分区>
html - 我无法使用纯 css 检索 flex 的边框效果
我必须重现一个带有顶部边框的盒子的模型，中间有一条曲线。
像上面这样。我不知道我该怎么做。我认为有一些位置和边界设置。我已经尝试了 2 个小时，但我做不到。
我在网上得到了一些现成的代码，但我无法根据自己的需要对其进行调整。 这里的代码:
<div id="message-holder"></div>
#message-holder {
margin-top:50px;
width:300px;
height:300px;
left: 37%;
background: #F9EDEF;
position:relative;
border:1px solid #edb2b7;
}
#message-holder:before, #message-holder:after{
content:"";
position:absolute;
top:24px;
left:110px;
border-bottom:25px solid #f9edef;
border-left:25px solid transparent;
border-right:25px solid #f9edef;
}
#message-holder:before{
top:25px;
border-bottom-color:#edb2b7;
}
这是完全错误的!
有人可以帮我吗？
最佳答案
您可以使用 CSS 边框颜色/宽度技巧来实现这种效果。
这是一个例子。
要控制边的长度，可以改变:after伪元素里面的值
border-right-width: 100px;
body {
background-color: #153050;
}
#header {
background-color: #0D4585;
padding: 10px 20px 20px;
border-top-right-radius: 20px;
border-bottom: 1px solid darkblue;
margin-top: 50px;
position: relative;
width: 50%;
}
#header:before {
content: '';
position: absolute;
top: -20px;
left: 0;
border: 20px solid #0D4585;
border-top-left-radius: 20px;
border-bottom-color: transparent;
border-right-color: transparent;
border-right-width: 0;
border-bottom-width: 0;
}
#header:after {
content: '';
position: absolute;
top: -40px;
left: 20px;
width: 30%;
border: 20px solid rgba(255, 255, 255, 0);
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: #0D4585;
border-right-width: 100px;
border-left-width: 0;
}
#header h3 {
color: #fff;
margin: 0;
}<div id="header">
<h3>Heading</h3>
</div>关于html - 我无法使用纯 css 检索 flex 的边框效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41499311/