平行四边形

<!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. 201800628模拟赛T2——最大土地面积

    题目描述 在某块平面土地上有N个点,你可以选择其中的任意四个点,将这片土地围起来,当然,你希望这四个点围成的多边形面积最大. 输入输出格式 输入格式: 第1行一个正整数N,接下来N行,每行2个数x,y ...

  2. 修改/etc/docker/daemon.json中的log-opts配置发现无效 docker 限制日志大小

    https://colobu.com/2018/10/22/no-space-left-on-device-for-docker/ 在/etc/docker/daemon.json中修改或添加log- ...

  3. HTML基础四-VUE

    一.VUE VUE官网:https://cn.vuejs.org/v2/guide/ 1.1 Vue简介 VUE与JS的区别 VUE在JS的基础上进行了优化 增加VUE最强大的特点,对数据操作特别的友 ...

  4. Ansible常用模块整理

    问答题 请总结今天所学的ansible模块,以及各个模块的作用! ping ping模块用来检查目标主机是否在线 例子:ansible webserver -m ping yum yum模块用来在Ce ...

  5. LOJ P10022 埃及分数 题解

    每日一题 day62 打卡 Analysis 这道题一看感觉很像搜索,但是每次枚举x∈(1,10000000)作为分母显然太蠢了. 所以我们要想办法优化代码. 优化一:迭代加深 优化二: 我们确定了搜 ...

  6. Rotor里的异常处理

    我看到了一些关于Rotor(和CLR)中使用的异常处理机制的问题.下面是关于Rotor异常处理的另一个注意事项列表.目的是帮助Rotor开发人员调试和理解CLR中的异常. 异常生成和抛出 此步骤在很大 ...

  7. 原生ajax分页，无刷新分页，最简化。超简单，代码最少

    <html><script> var page=1; // 页面第一次加载,显示第一页 window.onload=function(){ ajax_go(1) } //分页的 ...

  8. Python语言基础考察点：python语言基础常见考题（一）

    一.python是静态还是动态类型?是强类型还是弱类型? 1.动态强类型语言(不少人误以为是弱类型) 不要傻傻分不清 2.动态还是静态指的是编译期还是运行期确定类型 3.强类型指的是不会发生隐式类型转 ...

  9. Guava cacha 机制及源码分析

    1.ehcahce 什么时候用比较好:2.问题:当有个消息的key不在guava里面的话,如果大量的消息过来,会同时请求数据库吗?还是只有一个请求数据库,其他的等待第一个把数据从DB加载到Guava中 ...

  10. 【RS】AutoRec: Autoencoders Meet Collaborative Filtering - AutoRec：当自编码器遇上协同过滤

    [论文标题]AutoRec: Autoencoders Meet Collaborative Filtering (WWW'15) [论文作者]Suvash Sedhain †∗ , Aditya K ...