强大的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. Ubuntu转到root用户后用户名路径没有颜色

    看到好多都直接把普通会用户的.bashrc配置复制到root家目录下,由于本人小白,很多.bashrc配置看不懂,也不敢随便修改.于是找到别的配置方法. 普通用户的os@a:~$和root用户的roo ...

  2. 源码随想 String -> SoftReference

    源码随想 String -> SoftReference 2021年7月27日 15:38:14 今天实习时看 String的源码,发现其中的一个构造方法 public String(byte ...

  3. Vue3解决ElementPlus Drawer或弹出对话框不生效的问题

    第一时间检查你是否还在使用 :visible.sync="drawer" 来绑定事件框的隐藏和显示,vue3.0 已经更改为通过 v-model 来绑定事件框的显示与隐藏.

  4. 强制更改windows电脑密码

    强制更改windows电脑密码 1.重启电脑,连续按F8,在出现的高级选项中 2.选择administrator用户,打开管理员命令窗口 3.输入命令 etuserAA123456/add 密码就会被 ...

  5. 关于IOC容器

    1.什么是 IOC (1)控制反转,把对象创建和对象之间的调用过程,交给 Spring 进行管理 (2)使用 IOC 目的:为了耦合度降低

  6. uoj221【NOI2016】循环之美

    前面部分比较简单,就是无脑化式子,简单点讲好了. 首先肯定在\((x,y)=1\)时才考虑这个分数,要求纯循环的话,不妨猜猜结论,就是y必须和K互质.所以答案是\(\sum_{i=1}^n \sum_ ...

  7. 作用域通信对象：session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后，跳转到另外一个页面显示用户

    作用域通信对象:session session对象基于会话,不同用户拥有不同的会话.同一个用户共享session对象的所有属性.作用域开始客户连接到应用程序的某个页面,结束与服务器断开连接.sessi ...

  8. 京东云开发者| Redis数据结构(二)-List、Hash、Set及Sorted Set的结构实现

    1 引言 之前介绍了Redis的数据存储及String类型的实现,接下来再来看下List.Hash.Set及Sorted Set的数据结构的实现. 2 List List类型通常被用作异步消息队列.文 ...

  9. 实战进阶 Vue3+Axios+pinia

    实战进阶 Vue3+Axios+pinia 创建文件utils/request.js import Axios from 'axios'; export const request = Axios.c ...

  10. html和php里引用文件

    html里引入css文件: <link href="base.css" rel="stylesheet" type="text/css" ...