强大的css样式实现平行四边形：

啥也不说了，直接上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style type="text/css">

        .parallelogram {

            width: 60px;

            height: 35px;

            transform:skewX(-30deg);

            text-align: center;

            line-height: 35px;

            background-color: rgb(43, 45, 126);

            margin: 50px ;

            color: aliceblue;

        }

        .parallelogram>p{

            transform: skewX(30deg);

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="parallelogram">

            <p>资讯</p>

        </div>

    </div>

</body>

</html>

css样式实现平行四边形的更多相关文章

  1. 特殊的css样式

    在一定范围大小变化的div .div { width:auto; height:auto; min-height:100px; min-width:100px; max-height:200px; m ...

  2. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  3. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  5. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  6. 脚本工具（获取某个文件夹下的所有图片属性批量生成css样式）

    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...

  7. jQuery所支持的css样式

    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...

  8. Yii2 assets注册的css样式文件没有加载

    准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...

  9. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

随机推荐

  1. 如何在linux下检测（自身）IP冲突

    最近遇到一个需求,或者说是一个用户现场问题. 我们设备先安装,设置dhcp模式获取ip进行联网,后来又安装了其他设备,但该设备是手动设置的静态ip地址,正好与我们设备冲突,造成网络故障. 那我们就需要 ...

  2. 中小制造企业需要ERP和MES吗？

    并不是所有中小制造企业都需要ERP和MES,这个取决于你的规模和管理思维与模式!匹配很重要,不同规模的企业做不同的选择!比如你大型企业,一般是要使用ERP的,其工厂也应该需要上MES系统,ERP主要用 ...

  3. 关于private子网访问s3时报错：Connect timeout on endpoint URL

    今天在使用private私有子网,通过aws s3命令访问s3时,报如下错误: [qq_5201351@private ~]$ aws s3 ls Connect timeout on endpoin ...

  4. C语言中的位域的使用

    转载:http://blog.sina.com.cn/s/blog_648d306d0100mv1c.html C语言中的位域的使用一.位域 有些信息在存储时,并不需要占用一个完整的字节, 而只需占几 ...

  5. c++算法竞赛常用板子集合（持续更新）

    前言 本文主要包含算法竞赛一些常用的板子,码风可能不是太好,还请见谅. 后续会继续补充没有的板子.当然我太菜了有些可能写不出来T^T 稍微有些分类但不多,原谅我QwQ 建议 Ctrl + F 以快速查 ...

  6. k8s运维之pod排错

    k8s运维之pod排错 K8S是一个开源的,用于管理云平台中多个主机上的容器化应用,Kubernetes的目标是让部署容器化变得简单并且高效 K8S的核心优势: 1,基于yaml文件实现容器的自动创建 ...

  7. 三、Kubernetes调度

    一.Kubernetes调度 Scheduler 是 kubernetes 的调度器,主要的任务是把定义的 pod 分配到集群的节点上.听起来非常简单,但有很多要考虑的问题: 公平:如何保证每个节点都 ...

  8. JS 学习笔记 (六) 函数式编程

    1.函数闭包 1.1 概述 JavaScript采用词法作用域,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的. 为了实现这种词法作用域,JavaScript函数对 ...

  9. Linux--网络基础（概念+协议的了解+OSI七层模型，TCP/IP五层协议，网络数据传输流程）

    网络的发展 网络的发展有下面几个阶段: 独立模式:计算机最开始是以单机模式被广泛使用的.每一台计算机都是独立的,之间不能够进行数据共享与通信 网络互联: 计算机之间可以链接在一起,完成数据共享,计算机 ...

  10. 幂次方表达:p1010

    1 题目ID: P1010 [NOIP1998 普及组] 幂次方 2 题目描述: 任何一个正整数都可以用 22 的幂次方表示.例如 137=2^7+2^3+2^0137=27+23+20. 同时约定方 ...