平行四边形

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3</title>

<style type="text/css">

*{

    margin:0;

    padding: 0;

}

body{background-color:#000;}

.box {

    background:#fff;

    width:400px;

    position: relative;

    z-index: 0;

    margin:200px;

    transform: skewX(-30deg);

    padding-left:20px;

}

.box p{

    line-height: 30px;

    transform: skewX(30deg);

}

</style>

</head>

<body>

    <div class="box">

        <p>1、一提到平行四边形，条件反射般的就会想起CSS </p>

        <p>1、一提到平行四边形，条件反射般的就会想起CSS </p>

        <p>1、一提到平行四边形，条件反射般的就会想起CSS </p>

        <p>1、一提到平行四边形，条件反射般的就会想起CSS </p>

        <p>1、一提到平行四边形，条件反射般的就会想起CSS </p>

        <p>1、一提到平行四边形，条件反射般的就会想起CSS </p>

        <p>1、一提到平行四边形，条件反射般的就会想起CSS </p>

        <p>1、一提到平行四边形，条件反射般的就会想起CSS </p>

        <p>1、一提到平行四边形，条件反射般的就会想起CSS </p>

        <p>1、一提到平行四边形，条件反射般的就会想起CSS </p>

    </div>

</body>

</html>

css 平行四边形的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. css实现平行四边形、菱形图片效果

    一.平行四边形 1. 使用两个元素实现 html <a class="button"> <div>click me</div> </a&g ...

  3. 用 CSS 实现三角形与平行四边形

    最近在逛某个技术网站的时候,感觉文章关键词上的样式好酷炫啊.于是我将那种写法照搬到了我的博客中,也许最近逛过我博客的小伙伴已经发现了它出现在哪儿了——分页的样式.来张截图: 你在首页的底部也可以看到这 ...

  4. CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形

    本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...

  5. web前端教程：用 CSS 实现三角形与平行四边形

    最近在逛某个技术网站的时候,感觉文章关键词上的样式好酷炫啊,分页的样式.来张截图: 你在首页的底部也可以看到这样一个分页栏:是不是看上去还不错?下面就来看看这是如何实现的吧~ 第一种方法:利用bord ...

  6. CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

    转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...

  7. 【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

    转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html 代码部分有小改动. 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生 ...

  8. 平行四边形 css实现

    首先将 display 设置为  inline-block 或block: 在应用skew(): transform:skewX(-45deg); 但是也会导致平行四边形内的文字倾斜如下 我们可以给文 ...

  9. 用CSS画平行四边形

    <div class="jx">我是一个平行四边形</div> <style> .jx{ //定义div的高度宽度 transform:skew ...

随机推荐

  1. Django-Model操作数据库

    查询 models.UserInfo.objects.all() models.UserInfo.objects.all().values('user') #只取user列 models.UserIn ...

  2. ES6基础-ES6的扩展

    进行对字符串扩展,正则扩展,数值扩展,函数扩展,对象扩展,数组扩展. 开发环境准备: 编辑器(VS Code, Atom,Sublime)或者IDE(Webstorm) 浏览器最新的Chrome 字符 ...

  3. Flask 中的 request 之 先知道有这么个东西

    每个框架中都有处理请求的机制(request),但是每个框架的处理方式和机制是不同的 为了了解Flask的request中都有什么东西,首先我们要写一个前后端的交互 基于HTML + Flask 写一 ...

  4. Web项目中使用Log4net 案例

    简介: 几乎所有的大型应用都会有自己的用于跟踪调试的API.因为一旦程序被部署以后,就不太可能再利用专门的调试工具了.然而一个管理员可能需要有一套强大的日志系统来诊断和修复配置上的问题. 经验表明,日 ...

  5. C++ 派生类覆盖重载基类函数

    派生类希望基类重载函数可见,情况有三种: a)派生类中覆盖某个版本,则某个版本可见,全部都覆盖重写,则全部版本可见. b)派生类中一个也不覆盖,则全部基类版本可见. c)派生类需要添加新的重载版本,同 ...

  6. js 压缩图片（只缩小体积，不更改图片尺寸）

      1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...

  7. Solr7.x学习（1）-安装

    1.下载solr-7.7.2.tgz和jdk-8u221-linux-x64.tar.gz 2.将文件解压到/usr/local目录 cd /usr/local/ tar -zxvf jdk-8u22 ...

  8. 【免费视频】使用VS Code开发ASP.NET Core WebAPI应用程序

    1.使用VS Code开发ASP.NET Core WebAPI应用程序 1.使用Visual Studio Code开发Asp.Net Core基础入门实战 毕竟从.net过度过来的我们已经习惯了使 ...

  9. linux免费https证书申请教程

    linux免费https证书申请教程直接去阿里云 菜单有个证书服务进去有个购买证书菜单 选择免费的 然后会提示写个人资料 然后系统生成csr 然后提交审核这个时候会有份邮件 文件下载上传到你的服务器 ...

  10. Xamarin.Android 6.0以后开启权限方法

    Android 6.0 版本以上一些危险权限只能在运行的时候依次询问用户是否赋予,所以在开发的时候使用 RequestPermissions 方法单独请求所需要的权限. 代码: //开启相机权限 if ...