如何解决CSS-具有切角和边框颜色的矩形div
我正在尝试实现如下图所示的形状:
要有2个带有切角的矩形div,并且1个div置于另一个div的后面。
.wrapper {
display: flex;
justify-content: center;
}
.connect {
width: 254px;
height: 50px;
background: red;
background: #FF2D5069;
border-top: 2px solid #FF2175;
position: absolute;
bottom: 0;
z-index: 5;
}
.connect::before {
content: '';
position: absolute;
bottom: 0;
right: -2px;
border-top: 52px solid white;
border-left: 42px solid transparent;
}
.connect::after {
content: '';
position: absolute;
bottom: 0;
left: -2px;
border-top: 52px solid white;
border-right: 42px solid transparent;
}
.connect-behind {
width: 300px;
height: 44px;
background: red;
background: #FF2D5069;
border-top: 2px solid #FF2175;
position: absolute;
bottom: 0;
}
.connect-behind::before {
content: '';
position: absolute;
bottom: 0;
right: -2px;
border-top: 46px solid white;
border-left: 26px solid transparent;
}
.connect-behind::after {
content: '';
position: absolute;
bottom: 0;
left: -2px;
border-top: 46px solid white;
border-right: 26px solid transparent;
}
<div class="wrapper">
<div class="connect"></div>
<div class="connect-behind"></div>
</div>
我从其他线程获取了引用,以使用behind
和after
作为解决方案,但似乎无法解决我的问题。请帮助,谢谢。
解决方法
您可以使用透视图和变换:
可能的示例(用于信息:使用网格而不是绝对的):
.wrapper {
display: grid;
justify-content: center;
align-items: end;
height: 300px;
perspective: 50px;
}
.connect,.connect-behind {
transform: rotatex(50deg);
background: red;
margin: 0 auto;
background: #FF2D5069;
border-top: 2px solid #FF2175;
grid-row: 1;
grid-column: 1;
transform-origin: bottom center;
}
.connect-behind {
width: 300px;
height: 44px;
}
.connect {
width: 254px;
height: 50px;
;
}
<div class="wrapper">
<div class="connect"></div>
<div class="connect-behind"></div>
</div>
在形状周围绘制border
,drop-shadow
可能有用
.wrapper {
display: grid;
justify-content: center;
align-items: end;
height: 300px;
perspective: 50px;
filter:
drop-shadow( 1px 0px 0 )
drop-shadow(-1px 0px 0 )
drop-shadow( 0px 1px 0 )
drop-shadow( 0px -1px 0 );
}
.connect,.connect-behind {
transform: rotatex(50deg);
background: red;
margin: 0 auto;
background:white;
grid-row: 1;
grid-column: 1;
transform-origin: bottom center;
background:#ffa500;
}
.connect-behind {
width: 254px;
height: 50px;
border-left:solid 2px;
border-right:solid 2px;
}
.connect {
background:#ed1c24;
width: 300px;
height: 44px;
;
}
<div class="wrapper">
<div class="connect"></div>
<div class="connect-behind"></div>
</div>
,
您可以使用clip-path这样的事情。在大多数浏览器中(我认为)效果很好。但是,某些浏览器(例如,ie11和更早的浏览器)无法正确呈现它,因此您可能需要针对这些情况进行后备。
body {
overflow: hidden;
}
.wrapper {
display: flex;
justify-content: center;
}
.connect {
width: 254px;
height: 80px;
background: red;
background: #FF2D5069;
border-top: 2px solid black;
position: absolute;
bottom: 0;
z-index: 5;
clip-path: polygon(20% 0%,80% 0%,100% 100%,0% 100%);
}
.connect-border-left {
height: 80px;
width: 2px;
background: black;
left: calc(50% - 131px);
position: absolute;
bottom: -12px;
transform: rotate(34deg) translateX(-50%);
display: inline-block;
}
.connect-border-right {
height: 80px;
width: 2px;
background: black;
right: calc(50% - 131px);
position: absolute;
bottom: -12px;
transform: rotate(-34deg) translateX(-50%);
display: inline-block;
}
.connect-behind {
width: 300px;
height: 60px;
background: red;
background: #FF2D5069;
border-top: 2px solid black;
position: absolute;
bottom: 0;
clip-path: polygon(14% 0%,86% 0%,0% 100%);
}
.connect-behind-border-right {
height: 100px;
width: 2px;
background: black;
right: calc(50% - 103px);
position: absolute;
bottom: -11px;
transform: rotate(-32deg) translateX(-50%);
display: inline-block;
}
.connect-behind-border-left {
height: 100px;
width: 2px;
background: black;
left: calc(50% - 103px);
position: absolute;
bottom: -11px;
transform: rotate(32deg) translateX(-50%);
display: inline-block;
}
<div class="wrapper">
<div class="connect"></div>
<div class="connect-border-left"></div>
<div class="connect-border-right"></div>
<div class="connect-behind"></div>
<div class="connect-behind-border-left"></div>
<div class="connect-behind-border-right"></div>
</div>
,
具有偏斜变换,剪切路径和多个背景的想法:
.box {
--b:3px; /* border width */
--t:20px; /* top part width */
--s:30px; /* side part width */
margin:10px;
display:inline-block;
width:250px;
height:150px;
position:relative;
}
.box::before,.box::after {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:50%;
border-style:solid;
border-width:var(--b) 0 0 var(--b);
background:
linear-gradient(black 0 0) 0 var(--t)/100% var(--b),linear-gradient(black 0 0) var(--s) 0/var(--b) 100%,linear-gradient(red 0 0) left/var(--s) 100%,orange;
background-repeat:no-repeat;
transform-origin:bottom right;
transform:skew(-20deg);
clip-path:polygon(0 calc(var(--t) + var(--b)),calc(var(--s) + var(--b)) calc(var(--t) + var(--b)),calc(var(--s) + var(--b)) 0,60% 0,0 100%);
}
.box::after {
transform:scale(-1,1) skew(-20deg);
}
<div class="box"></div>
<div class="box" style="--b:2px;--t:30px;--s:15px;"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。