原理就是前端三角形
整体是用flex做一个左右结构 → 右边上下结构 → 右上又是上下结构 → 右边的上下都是用前端三角形来做,上面那个三角形宽高为0,左边框设置40px和颜色 → 下面那个三角形宽高为0,下边框设置40px和颜色,但是border要设成透明颜色,避免覆盖上面的三角形
上代码~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>梯形实现</title>
<style>
.container {
margin: 0 auto;
width: 300px;
height: 180px;
border-radius: 5%;
background-color: #ffd608;
padding: 10px;
box-sizing: border-box;
display: flex;
}
.left {
background-color: #fff;
height: 100%;
flex: 1;
}
.right {
flex: 2;
position: relative;
}
.rightTop {
width: 0;
height: 0;
border: 40px solid #ffd608;
border-left: 40px solid #fff;
}
.test {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border: 40px solid transparent;
border-bottom: 40px solid #fff;
}
.rightBottom {
width: 100%;
height: 50%;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right">
<div class="rightTop"></div>
<div class="test"></div>
<div class="rightBottom"></div>
</div>
</div>
</body>
</html>