强大的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. python的注释、变量

    注释 注释是代码的解释型语言,不会影响代码执行,就是专门给程序员看的. 注释是很重要的代码组成部分! # 单行注释 ''' 多行注释 连续输入三个单引号 ''' """ ...

  2. acwing349 黑暗城堡 （最短路径生成树）

    求出最短树,用乘法原理统计答案就行了(模拟prim过程). 不知道说什么了,直接上代码: 1 #include<cstring> 2 #include<iostream> 3 ...

  3. POJ2728 Desert King （最小生成树、0/1分数规划）

    显然的0/1分数规划问题,用二分来解决,检验mid,就用prim算法求最小生成树,看总边权是否大等于0即可验证. 1 #include<bits/stdc++.h> 2 using nam ...

  4. 「JOISC 2022 Day1」京都观光 题解

    Solution 考虑从\((x_1,y_1)\)走到\((x_2,y_2)\)满足只改变一次方向,则容易求出先向南走当且仅当 \[\frac{a_{x_1} - a_{x_2}}{x_1 - x_2 ...

  5. 安装与配置FTP服务器

    概:   文件传输协议 (File Transfer Protocol,FTP),用于在网络上进行文件传输的协议.如果用户需要将文件从本机发送到另一台计算机,可以使用FTP上传操作:反之,用户可以使用 ...

  6. Oracle数据库的两种授权收费方式介绍！

    首发微信公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1 ...

  7. 如何通过 C#/VB.NET 重命名 Excel 表格并设置选项卡颜色

    在 Excel 文件中创建多个工作表可以使数据更加井然有序.例如,可以为不同的区域.不同的月份/年份或不同的项目等创建不同的工作表.但要区分多个工作表,则需要更改它们的名称.同时,设置不同的选项卡颜色 ...

  8. 【原创】All in One i.MXRT1050/RT1020 SPI Flash Algorithm for J-Flash

    2020年,这个给大家一种很漫长的恍惚感的一年,终于是过去了.这一年我们很多新的人生第一次就这么被发生了,第一次居家办公这么长时间(很多人肥膘都长了不少,我却瘦了2斤,不知是工作太积极了还是被家里小怪 ...

  9. 一键生成CA证书

    create_cert () { cd /etc/openvpn/easy-rsa ./easyrsa gen-req ${NAME} nopass <<EOF EOF cd /etc/o ...

  10. Java多线程-线程关键字（二）

    Java中和线程相关的关键字就两:volatile和synchronized. volatile以前用得较少,以后会用得更少(后面解释).它是一种非常轻量级的同步机制,它的三大特性是: 1.保证可见性 ...