css3 使用的个人笔记

最新推荐文章于 2025-04-18 10:08:36 发布

原创最新推荐文章于 2025-04-18 10:08:36 发布 · 113 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

个人笔记

当前文章被收录于：

个人笔记

84 篇文章 3 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

css3 做出顶边倾斜的梯形 div

图片展示效果

在这里插入图片描述

<html>
<head>
<meta charset="utf-8"> 
<title>顶边倾斜的div梯形</title> 
<style> 
.box
{
    border-radius:0px;
    width:200px;
    height:100px;
    background-color:green;
    position:relative;
}
.content{
    margin-top:50px;
    width:200px;
    padding-top:50px;
    overflow:hidden;
    border-radius:0px;
}
.box::before
{
    position:absolute;
    top:0;
    left:0;
    content:"";
    z-index:-1;
    width:210px; /*如果需要圆角的话 不用比box的宽度长,如果不需要圆角需要增长*/
    height:100px;
    background-color:green;
    transform:rotate(-10deg);
    transform-origin:left top;
    border-radius:0px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">Hello</div>
</div>
</body>
</html>