平行四边形

<!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. nginx secure_link_module 访问包含

    server { listen 80; server_name localhost; #charset koi8-r; #access_log /var/log/nginx/log/host.acce ...

  2. ESP8266 LUA脚本语言开发: 测试下诱人的程序

    前言 这一节测试一下诱人的程序 实现的功能,APP通过SmartConfig给Wi-Fi模块配网并绑定设备,然后通过MQTT远程控制开发板的继电器, APP显示ESP8266采集的温湿度数据. 简而言 ...

  3. Python实现电子词典

    代码一览: dictionary/├── code│   ├── client.py│   ├── func.py│   ├── server.py│   └── settings.py├── dat ...

  4. datatime模块的使用

    dt_now = datetime.datetime.now()print(dt_now)# 2019-05-09 14:44:32.555337 获取日期,不含时分秒today = dt_now.d ...

  5. 【技术博客】 Laravel 5.1单元测试（PHPUnit）入门

    目录 Laravel 5.1单元测试(PHPUnit)入门 简介 安装与配置 1. 安装 2. 配置 编写测试样例 1. 新建测试样例 2. 编写函数的测试 3. 编写Web功能测试 运行测试与查看结 ...

  6. LOJ3124 CTS2019 氪金手游 概率、容斥、树形DP

    传送门 D2T3签到题可真是IQ Decrease,概率独立没想到然后就20pts滚粗了 注意题目是先对于所有点rand一个权值\(w\)然后再抽卡. 先考虑给出的关系是一棵外向树的情况.那么我们要求 ...

  7. Spring的JdbcTemplate使用教程

    Spring对数据库的操作在jdbc上面做了基本的封装,让开发者在操作数据库时只需关注SQL语句和查询 结果处理器,即可完成功能(当然,只使用JdbcTemplate,还不能摆脱持久层实现类的编写). ...

  8. mapreduce 函数入门 三

    一.mapreduce多job串联 1.需求 一个稍复杂点的处理逻辑往往需要多个 mapreduce 程序串联处理,多 job 的串联可以借助 mapreduce 框架的 JobControl 实现 ...

  9. mPython编程环境：Mu

    所谓编程环境,IDE ,就是这个软件里,用mPython写程序,新建文件,编辑 ,运行 ,调试 ,Mu还有一个重要功能烧录(flash),就是把我们的程序编译之后写到芯片中去. Mu下载,安装都很简单 ...

  10. js2048小游戏

    js2048小游戏,方格是怎么合并和移动的 index.html <html> <head> <meta charset="utf-8"> &l ...