平行四边形

<!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. JMeter【第四篇】参数化

    概念 参数化的原因,并不是网上说的真实模拟不同用户,真实反应服务器性能,而是: 数据唯一性(比如注册名不能一样) 避免数据库查询缓存 如何避免参数化: 去掉唯一性校验的约束 关闭数据库的查询缓存,my ...

  2. 【Hadoop】集群网络

  3. 前端之CSS(上)

    CSS CSS 简介 ## CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染 ...

  4. Windbg源代码窗口的使用

    在 WinDbg 中,源窗口显示已加载到调试器中的源文件. 如何打开源代码窗口 通过菜单File--->Open Source File打开源代码文件,窗口随之打开 通过快捷键Ctrl+O 通过 ...

  5. graalvm native image 试用

    graalvm 提供的native 模式,可以加速应用的启动,不同可以让应用不再依赖jvm 运行时环境,但是 也有一些限制 参考 https://github.com/oracle/graal/blo ...

  6. manacher算法笔记

    模板 [模板]manacher算法 不妨先只考虑如何求长度为奇数的回文串 记\(P[i]\)表示以\(i\)为中心最多向两边扩展几个字符,满足回文 如串\(ababa\), \(P[1]=0,P[2] ...

  7. jupyterlab数据处理

    目录 jupyterlab: jupyterlab简介: jupyterlab特点: jupyterlab安装,启动 使用jupyterlab: 设置jupyterlab jupyterlab: ju ...

  8. 2018-2019-2 网络对抗技术 20165230 Exp7 网络欺诈防范

    实验目的 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 实验内容 简单应用SET工具建立冒名网站 ettercap DNS spoof 结合应用两种技术,用DNS sp ...

  9. zooKeeper使用记录

    背景:记录zooKeeper使用过程中遇到的问题. 在删除zooKeeper相关节点的时候需要进行权限的认证,下面的连接讲的还是很详细的 zookeeper的ACL权限控制

  10. 了解编程语言 ----- c# 简介

    1.编程语言 编程语言: 为了实现人与机器的交互,计算机主要识别的就是 0 和 1 语言的发展过程主要分为: 1.面向机器的语言:二进制,汇编 2.面向过程的语言:汇编语言,C语言,B语言, 3.基于 ...