效果图:

<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. Hadoop-全分布式配置

    目录 一.配置基础环境 1.配置网络信息 2.配置主机名 3.主机名与IP的映射关系 4.测试互通性 二.关闭防火墙和SELinux 1.关闭防火墙 2.关闭SELinux 三.安装 Hadoop 1 ...

  2. 一种基于USB转串口的设备如何赋予权限

    1. 利用open打开USB转串口的设备遇到打开异常. 若用vs调试代码,则需要usermod 对应归到watson组下,因为watson这个是vs ssh连接虚拟机的用户名,若用root则无法使用改 ...

  3. 羽夏看Win系统内核——异常篇

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...

  4. Python中的鸭子类型

    今天,我们来聊一聊Python中的鸭子类型(duck typing). 编程语言具有类型概念,例如Python中有数字类型.字符串类型.布尔类型,或者更加复杂的结构,例如元组tuple.列表list. ...

  5. SpringCloudAlibaba 微服务讲解（四）Sentinel--服务容错（一）

    4.1 高并发带来的问题 在微服务中,我们将业务拆分成一个个的服务,服务与服务之间可以相互调用,但是由于网络原因或者自身的原因,服务并不能保证100%可用,如果单个服务出现问题,调用这个服务就会出现网 ...

  6. char型变量中能不能存储一个中文字符?为什么?

    char型变量是用来存储Unicode编码的字符的,Unicode编码字符集中包含了汉字,因此char型变量中可以存储汉字.不过,如果某个特殊的汉字没有被包含在Unicode编码字符集中,那么,这个c ...

  7. javax.net.ssl.sslhandshakeException:sun.security.validator.validatorException:PKIX path buildind failed

    前段时间开发的一个需求,需要通过图片URL获取图片的base64编码,测试的时候使用的是百度图片的url,测试没有问题,但是发布后测试时报如下错: javax.net.ssl.sslhandshake ...

  8. 说说do...while和while的区别

    一.do-while语句 do-while语句的语法: do{ statement }while(expression); 看下面示例: var i=10: do{ i+=2: }while(i< ...

  9. Leetcode刷题之矩阵中的指针用法

    矩阵中的指针用法 1 快慢指针 ​ Leetcode27移除元素 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度.不要使用额外的数组 ...

  10. IdentityServer4系列 | 混合模式

    一.前言 在上一篇关于授权码模式中, 已经介绍了关于授权码的基本内容,认识到这是一个拥有更为安全的机制,但这个仍然存在局限,虽然在文中我们说到通过后端的方式去获取token,这种由web服务器和授权服 ...