效果图:

<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. 什么是BGP

    BGP概述 边界网关协议(BGP)是运行于TCP协议上的一种自治系统的路由协议. 是一种外部路由协议. AS概述 自治系统(AS),指的是同一个使用相同策略的设备的集合. 每个AS有自己位移的编号,不 ...

  2. JVM内存模型——堆(heap)、栈(stack)和方法区(method)

      JAVA的JVM的内存可分为3个区:堆(heap).栈(stack)和方法区(method) 堆区:堆内存用于存放由new创建的对象和数组.堆是JVM管理的内存中最大的一块,堆被所有线程共享,目的 ...

  3. kafka端口和zookeeper端口

    一.问题描述 今天配合现场联调一个数据工具,工具使用到了kafka,程序启动之后包如下错误: [WARN ] [2020-08-17 19:17:27] [org.apache.kafka.clien ...

  4. C++11最常用的新特性如下

    1.auto关键字:编译器可以根据初始值自动推导出类型.但是不能用于函数传参.定义数组以及非静态成员变量. 2.nullptr关键字:是一种特殊类型的字面值,它可以被转换成任意其它类型的指针:而NUL ...

  5. 读懂jstack

    1 jstack jstack是JDK自带的一种线程栈跟踪工具,用于生成java虚拟机当前时刻线程快照.在定位线程卡顿.死锁.block等原因的时候非常有用.使用方法是: jstack [-l] pi ...

  6. 什么是 Spring 的依赖注入？

    依赖注入,是 IOC 的一个方面,是个通常的概念,它有多种解释.这概念是说你 不用创建对象,而只需要描述它如何被创建.你不在代码里直接组装你的组件和 服务,但是要在配置文件里描述哪些组件需要哪些服务, ...

  7. mybatis 和 hibernate 本质区别和应用场景

    Hibernate: 是一个标准 ORM 框架(对象关系映射).入门门槛较高,不需要程序员写 SQL,SQL语句自动生成. 对 SQL 语句进行优化.修改比较困难. 应用场景: 适用于需求变化不多的中 ...

  8. 『忘了再学』Shell基础 — 7、Bash基本功能（多命令顺序执行）

    目录 1.多命令执行符: 2.多命令执行符&& 3.多命令执行符|| 4.&&和||联合应用 Linux系统支持多条命令顺序执行,就是我可以依次输入多条命令后,统一按E ...

  9. 超声波模块HC-SR04简介以及编程

    HC-SR04 一.主要参数1:使用电压:DC-5V2:静态电流:小于2mA3:电平输出:高5V4:电平输出:底0V5:感应角度:不大于15度6:探测距离:2cm-450cm7:高精度 可达0.2cm ...

  10. C# Tutorial for Frontend Developer

    1.Basic Hello World Console output -> console.log Console.WriteLine("Hello World!"); Va ...