<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<style>
.g-container{
position:relative;
width:300px;
height:100px;
background:red;
border:1pxsolid#277f9e;
border-radius:10px;
overflow:hidden;
}
.g-inner{
position:absolute;
width:150px;
height:50px;
background:#fee6e0;
bottom:0;
border-radius:020px020px;
transform:perspective(40px)scaleX(1.4)scaleY(1.5)rotateX(20deg)translate(-10px,0);
transform-origin:50%100%;
}
.g-inner::before{
content:"";
position:absolute;
right:-10px;
width:10px;
height:10px;
top:40px;
background:radial-gradient(circleat100%0,transparent,transparent9.5px,#fee6e010px,#fee6e0);
}
.g-after{
position:absolute;
width:150px;
height:50px;
background:#6ecb15;
bottom:49px;
right:0;
border-radius:20px020px0;
transform:perspective(40px)scaleX(1.4)scaleY(-1.5)rotateX(20deg)translate(14px,0);
transform-origin:53%100%;
}
.g-after::before{
content:"";
position:absolute;
left:-10px;
top:40px;
width:10px;
height:10px;
background:radial-gradient(circleat00,transparent,transparent9.5px,#6ecb1510px,#6ecb15);
}
.g-inner-text,.g-after-text{
position:absolute;
width:150px;
height:50px;
line-height:50px;
text-align:center;
}
.g-inner-text{
top:50%;
left:0;
}
.g-after-text{
top:50%;
right:0;
}
</style>
<body>
<divclass="g-container">
<divclass="g-inner"></div>
<divclass="g-after"></div>
<divclass="g-inner-text">选项卡1</div>
<divclass="g-after-text">选项卡2</div>
</div>
</body>
</html>
|
Copyright©2000-2023