效果图:

<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. 论文翻译：2021_Joint Online Multichannel Acoustic Echo Cancellation, Speech Dereverberation and Source Separation

    论文地址:https://arxiv.53yu.com/abs/2104.04325 联合在线多通道声学回声消除.语音去混响和声源分离 摘要: 本文提出了一种联合声源分离算法,可同时减少声学回声.混响 ...

  2. 为什么等待和通知是在 Object 类而不是 Thread 中声明的？

    一个棘手的 Java 问题,如果 Java编程语言不是你设计的,你怎么能回答这个问题呢.Java编程的常识和深入了解有助于回答这种棘手的 Java 核心方面的面试问题.为什么 wait,notify ...

  3. Redis的Jedis操作（五）

    需要把jedis依赖的jar包添加到工程中.Maven工程中需要把jedis的坐标添加到依赖. 推荐添加到服务层. 1.连接单机版 第一步:创建一个Jedis对象.需要指定服务端的ip及端口. 第二步 ...

  4. js的json序列化和反序列化

    (1)序列化 即js中的Object转化为字符串 1.使用toJSONString var last=obj.toJSONString(); //将JSON对象转化为JSON字符 2.使用string ...

  5. 使用conda管理python环境和包

    操作系统:CentOS7使用virtualenv管理python虚拟环境virtualenv是一款轻量级第三方虚拟环境管理工具,不像Anaconda大小达上百M,virtualenv大小只有10M左右 ...

  6. 【动态规划】洛谷P1802 5 倍经验日（01背包问题）

    一个洛谷普及-的题目,也是我刚刚入门学习动态规划的练习题. 下面发一下我的思路和代码题解: 我的思路及伪代码: 我的AC图: 接下来上代码: 1 //动态规划 洛谷P1802 五倍经验日 2 #inc ...

  7. TOP 10 开源的推荐系统简介

      最 近这两年推荐系统特别火,本文搜集整理了一些比较好的开源推荐系统,即有轻量级的适用于做研究的SVDFeature.LibMF.LibFM等,也有重 量级的适用于工业系统的 Mahout.Oryx ...

  8. （十）React Ant Design Pro + .Net5 WebApi：后端环境搭建-IdentityServer4（二）授权模式

    一.前言 先交代一下整个Demo项目结构: 一个认证服务(端口5000)IdentityServer4.Authentication 五个授权模式(两个控制台程序,三个MVC项目端口5001)文件夹G ...

  9. 你可能不知道的 css 内容块

    position 我们都知道元素都拥有 position 这个css属性,先来看看他的基本定义和可用值. 定义 position 决定了元素位置是如何被渲染的 可用值 值 描述 static 默认值, ...

  10. Native方法的使用

    Java不是完美的,Java的不足除了体现在运行速度上要比传统的C++慢许多之外,Java无法直接访问到操作系统底层(如系统硬件等),为此Java使用native方法来扩展Java程序的功能. 可以将 ...