css3 做出顶边倾斜的梯形 div

最新推荐文章于 2024-06-21 15:14:18 发布

diedong8319

最新推荐文章于 2024-06-21 15:14:18 发布

阅读量1.7k

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/ITCoNan/p/11358343.html

版权

效果图:

<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>

转载于:https://www.cnblogs.com/ITCoNan/p/11358343.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

diedong8319

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3 做出顶边倾斜的梯形 div

效果图:<html><head><meta charset="utf-8"> <title>顶边倾斜的div梯形</title> <style> .box{ border-radius:0px; width:200px; height:100p...
复制链接

扫一扫