强大的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. 图片 css剪切，等比例缩放

    object-fit: cover; .img1 {//自定义图片宽高,并且等比例缩放 width: 200px; height: 400px; object-fit: cover; }

  2. 使用docker-compose安装Prometheus

    Prometheus监控 一. 总览 主要组件: Prometheus server: 用于收集和存储时间序列数据 exporter: 客户端生成监控指标 Alertmanager: 处理警报 Gra ...

  3. printf-库函数重定向、重载

    重定向:这是针对标准C语言语法来讲,指的是我们可以重新声明库函数并定义库函数的执行体 重载:这是CPP引入的新特性,即根据函数不同参数个数或参数类型来对同一函数名进行不同定义 C和CPP对重定向处理机 ...

  4. MongoDB、Redis、elasticSearch、hbase的对比

    MongoDB.Redis.elasticSearch.hbase的对比 MongoDB 优点: (1) 最大的特点是表结构灵活可变,字段类型可以随时修改. (2) 插入数据时,不必考虑表结构的限制. ...

  5. BigDecimal的运算——加减乘除

    BigDecimal的运算--加减乘除 1.初始化(尽量用字符串的形式初始化) BigDecimal num12 = new BigDecimal("0.005"); BigDec ...

  6. 华为设备配置telnet远程登陆命令

    user-interface vty 0 4 进入0~4前五个的VTY用户界面进行整体配置 authentication-mode password 设置验证方式为密码 user privilege ...

  7. 删除数组里含有a的元素，并且将null值放在后面

    想去掉里面含有a的元素,并将null放在后面.放在后面就是往后移,其他值往左移 1 public static void main(String[] args) { 2 //自定义的一个数组 3 St ...

  8. Docker_基础知识

    容器概述 容器本义:盛装物体.隔离物体. 容器意义:解决虚拟化资源浪费的问题. 容器沿革:1979---2013---                     版本:企业版(EE)/社区版(CE)1. ...

  9. FTP文本传输协议

    一.存储类型 存储类型分为三种: 直连式存储:Direct-Attached Storage,简称DAS 网络附加存储:Network-Attached Storage,简称NAS(存储和管理空间都在 ...

  10. javaWEB中的四种域对象

    javaWEB中的四种域对象 (1)ServletContext ServletContext是最大的Web域对象,在整个工程内有效,可以存储一些需要全局部署的配置文件,也可以存储其他信息,不过因为它 ...