如何在这样一个长方形div中,实现一个直接梯形,求救各位大佬请教下
其实主要就是使用伪类元素来实现三角形,具体如何使用伪类元素做一个三角形可以看这篇文章。
其他的就是正常布局了,大概如下的情况。
这是最后实现的效果 CodePen Demo
其实使用 flex
布局就可以实现了,但是我偷懒直接使用了绝对定位,把“空闲”状态直接定位到了右上角,问题不大。
提供一个利用线性渐变linear-gradient
的方案:
<div class="container">
<div class="content">
<div class="corner">
</div>
</div>
</div>
:root {
--card-width: 360px;
--card-height: 240px;
--card-background: #fbd839;
--card-foreground: white;
}
.container {
background-color: var(--card-background);
position: relative;
border-radius: 5%;
width: var(--card-width);
height: var(--card-height);
}
.container .content {
background-color: var(--card-foreground);
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
}
.content .corner {
position: absolute;
right: 0;
background: linear-gradient(
45deg,
var(--card-foreground) 0,
var(--card-foreground) 50%,
var(--card-background) 50%,
var(--card-background) 100%);
width: 100%;
height: 50%;
}
可以使用前端三角形的原理来实现,直接上代码,简单易懂~~~
<!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>
5 回答1.3k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
3 回答2.2k 阅读✓ 已解决
4 回答2k 阅读
2 回答1.4k 阅读✓ 已解决
3 回答1.3k 阅读✓ 已解决
1 回答1.5k 阅读✓ 已解决
利用clip-path的polygon函数进行裁剪就很容易做到
HTML部分
CSS部分