强大的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. JSP实现登录功能（页面带样式）

    功能要求 1.完成两个页面 2.第一个登陆页面login. jsp 3.第二个用户管理页面useManage. jsp 4.有登录功能(能进行用户名密码的校验,用户名若为自己的学号密码为班级号,允许登 ...

  2. 关于在Linux上安装aws cli版本1的记录

    AWS Command Line Interface (AWS CLI) 是一种开源工具,让您能够在命令行 Shell 中使用命令与 AWS 服务进行交互. 因公司项目要求,要在Linux服务器安装a ...

  3. 大数据技术之HBase原理与实战归纳分享-下

    @ 目录 整合Phoenix 定义 为何要使用 安装 SHELL操作 表的映射 简易JDBC示例 二级索引 二级索引配置文件 全局索引 包含索引 本地索引(local index) HBase与 Hi ...

  4. SDOI2017树点染色

    题目链接 发现1操作很像lct中的access,然后它每次染的又是一个新颜色,因此同一个颜色就在同一颗splay里了,且一个点到根的权值val[i]也就是到根路径上虚边的个数,然后看access时会对 ...

  5. lnmp配置laravel访问环境报错锦集

    1.laravel配置域名访问变成下载,实际就是Nginx没有识别到.php文件.把.php文件的配置加到Nginx即可 .... # 这一段放到项目的Nginx.conf配置文件里面 locatio ...

  6. 一天五道Java面试题----第六天（1）

    这里是参考B站上的大佬做的面试题笔记.大家也可以去看视频讲解!!! 文章目录 1.mybatis和hibernate的对比 2 .#{}和${}的区别 3 .mybatis插件运行原理及开发流程 4 ...

  7. PX01关于手机屏IIC触摸调试学习笔记

    相关文件下载: 上位机工具:http://www.xk-image.com/download/blog/0002_TP调试/LcdTools20210605.rar 调试案例:http://www.x ...

  8. Oracle设置内存参数后，启动数据库报ORA-00843 ORA-00849解决办法

    Oracle安装完成后,调优内存参数(MEMORY_TARGET和MEMORY_MAX_TARGET设置为0),重启数据库,报ORA-00843 ORA-00849错误. 根据提示,不应将MEMORY ...

  9. kafka-consumer-groups 命令行工具使用手册

    kafka-consumer-groups 命令行工具使用手册 该手册原文出自 $KAFKA_HOME\bin\windows\kafka-consumer-groups.bat --help 命令的 ...

  10. 嵌入式-C语言：通过结构体指针操作结构体内容

    #include<stdio.h> #include<string.h> struct Student { char name[32]; int age; int height ...