平行四边形

<!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. CentOS7配置本地Yum源

    从CentOS7官网下载DVD中存在需要的大部分软件,所以在没有网络的情况下可以配置yum源为本地的DVD,下载速度快,软件稳定.1. 如果使用虚拟机,那么就在虚拟机中挂载DVD的iso文件.2. 使 ...

  2. 2.8/4/6/8mm/12mm焦距的镜头分别能监控多大范围？

    2.8/4/6/8mm/12mm焦距的镜头分别能监控多大范围? 相关介绍 一.焦距和监控距离的关系 我司IPC镜头焦距有2.8/4mm/6mm/8mm等多种选择,可以满足室内外各种环境的拍摄需求.IP ...

  3. Debian 安装 yum

    sudo apt-get updatesudo apt-get install build-essentialsudo apt-get install yum

  4. PATB1048数字加密

    关于代码都是可以在PAT上跑通的 自己是在VS2017上写的,所以会有语句system("pause");,表示暂定方便查看结果. *在一个是VS2017中使用scanf会报错,所 ...

  5. CSRF 跨站

    目录 CSRF 跨站请求伪造 解决跨站伪造问题: csrf 相关的装饰器: csrf.js文件: CSRF 跨站请求伪造 CSRF全称为Cross-site request forgery,也被称为: ...

  6. #lua中编写shader的方式

    lua中编写shader的方式 1. 字符串拼接 类似于下面这种 vertDefaultSource = "\n".."\n" .. "attribu ...

  7. JS 中判断数据类型是否为 null、undefined 或 NaN

    判断 undefined var aaa = undefined; console.log(typeof(aaa) === "undefined"); // true 判断 nul ...

  8. OpenCV+TensorFlow图片手写数字识别(附源码)

    初次接触TensorFlow,而手写数字训练识别是其最基本的入门教程,网上关于训练的教程很多,但是模型的测试大多都是官方提供的一些素材,能不能自己随便写一串数字让机器识别出来呢?纸上得来终觉浅,带着这 ...

  9. Keras 入门实例

    使用Keras构建神经网络的基本工作流程主要可以分为 4个部分.(而这个用法和思路,很像是在使用Scikit-learn中的机器学习方法) Model definition → Model compi ...

  10. python 统计字符串中指定字符出现次数的方法

    python 统计字符串中指定字符出现次数的方法: strs = "They look good and stick good!" count_set = ['look','goo ...