效果图:

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

.box { border-radius: 0; width: 200px; height: 100px; background-color: rgba(0, 128, 0, 1); position: relative }
.content { margin-top: 50px; width: 200px; padding-top: 50px; overflow: hidden; border-radius: 0 }
.box::before { position: absolute; top: 0; left: 0; content: ""; z-index: -1; width: 210px; height: 100px; background-color: rgba(0, 128, 0, 1); transform: rotate(-10deg); transform-origin: left top; border-radius: 0 }

css3 做出顶边倾斜的 梯形 div的更多相关文章

  1. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  2. CSS3做小三角形

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8

  3. 利用HTML5 与CSS3 做的放大镜

    利用HTML5 与CSS3 做的放大镜 html结构 <div class="wrap"> <div class="move"> < ...

  4. css3做ipone当时的滑动解锁闪亮条

    现在一般的登录 注册 什么  的页面,都是会做个滑动验证.一般都是像IPONE早期那个 滑动开屏的效果 ,这个效果现在可以用CSS3来实现. 主要用到几个属性 background 背景使用渐变属性, ...

  5. css3动画特效：上下晃动的div

    css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div ...

  6. CSS3做动物走路效果

    CSS3做动物走路效果 采用的CSS3切换序列帧做 核心代码如下<pre>.game .role { width: 60px; height: 86px; position: absolu ...

  7. CSS3变形记(上)：千变万化的Div

    传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...

  8. 用css3做一个求婚小动画

    概述 本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细 代码下载:http://www ...

  9. HTML5+CSS3实现图片可倾斜摆放的动画相册效果

    先看看效果:其中鼠标悬浮在图片上会有动态效果图 直接上代码: css文件 @CHARSET "UTF-8"; *{ padding:0px; margin:0px; } div{ ...

随机推荐

  1. ISR、OSR、AR 是什么？

    ISR:In-Sync Replicas 副本同步队列 OSR:Out-of-Sync Replicas AR:Assigned Replicas 所有副本 ISR是由leader维护,followe ...

  2. 比较一下 Java 和 JavaSciprt?

    JavaScript 与 Java 是两个公司开发的不同的两个产品.Java 是原 Sun Microsystems 公司推出的面向对象的程序设计语言,特别适合于互联网应用程序 开发:而 JavaSc ...

  3. Java 语言如何进行异常处理，关键字：throws、throw、 try、catch、finally 分别如何使用？

    Java 通过面向对象的方法进行异常处理,把各种不同的异常进行分类,并提供了良好的接口.在 Java 中,每个异常都是一个对象,它是 Throwable 类或其子类的实例.当一个方法出现异常后便抛出一 ...

  4. 为什么WAIT必须在同步块中

    我们知道java的Object有wait和notify方法,如果要使用wait和notify的话,那么必须在synchronized块中,否则会抛出IllegalMonitorStateExcepti ...

  5. Oracle 数据库备份实战

    最近公司的客户希望使用oracle数据库,所以我们只好将数据从mysql数据库迁移到oracle数据库,并对oracle数据库制定了一个备份策略,之前虽然对oracle很熟悉,但做备份策略还是第一次, ...

  6. Python - numpy.clip()函数

    np.clip( a, a_min, a_max, out=None): 部分参数解释: 该函数的作用是将数组a中的所有数限定到范围a_min和a_max中.a:输入矩阵:a_min:被限定的最小值, ...

  7. C# 正则表达式判断是否是有效的文件、文件夹路径

    C# 正则表达式判断是否是有效的文件.文件夹路径 省流 /// <summary> /// 是否有效的文件,文件夹路径 /// </summary> /// <param ...

  8. 基于react的audio组件

    样式请自己定义哦~需要其他功能请自行添加! // 组件调用 <Audio src={src地址} id={srcID}/> audio属性 src 歌曲的路径 preload 是否在页面加 ...

  9. 小程序 wx.getSystemInfoSync 获取 windowHeight 问题

    windowHeight 概念 可使用窗口高度,即:屏幕高度(screenHeight) - 导航(tabbar)高度 存在问题 安卓设备下获取 windowHeight 不能准确得到对应的高度,总是 ...

  10. java中时间的规范是按美国,SimpleDateFormat怎么处理

    题目3.2: 如果时间的规范是按美国,怎么处理? import java.text.ParseException;import java.text.SimpleDateFormat;import ja ...