首先将 display 设置为  inline-block 或block；

在应用skew（）； transform:skewX(-45deg);

但是也会导致平行四边形内的文字倾斜如下

我们可以给文字加上一个容易 并设置相反的skew(),从而使内容的倾斜角度达到抵消的效果；

还有伪元素素的方法 没有试验成功。

https://www.w3cplus.com/css3/css-secrets/parallelograms.html

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

  1. CSS矩形、三角形等

    1.圆形 CSS代码如下:宽高一样,border-radius设为宽高的一半 #circle { width: 100px; height: 100px; background: red; -moz- ...

  2. HTML 和 CSS 画三角形和画多边行基本原理及实践

    基本 HTML 标签 <div class = 'test'></div> 基本 CSS 代码 .test { width: 100px; height: 100px; bac ...

  3. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  4. css实现平行四边形、菱形图片效果

    一.平行四边形 1. 使用两个元素实现 html <a class="button"> <div>click me</div> </a&g ...

  5. 用 CSS 实现三角形与平行四边形

    最近在逛某个技术网站的时候,感觉文章关键词上的样式好酷炫啊.于是我将那种写法照搬到了我的博客中,也许最近逛过我博客的小伙伴已经发现了它出现在哪儿了——分页的样式.来张截图: 你在首页的底部也可以看到这 ...

  6. CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形

    本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...

  7. web前端教程：用 CSS 实现三角形与平行四边形

    最近在逛某个技术网站的时候,感觉文章关键词上的样式好酷炫啊,分页的样式.来张截图: 你在首页的底部也可以看到这样一个分页栏:是不是看上去还不错?下面就来看看这是如何实现的吧~ 第一种方法:利用bord ...

  8. css 平行四边形

    平行四边形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

    转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...

随机推荐

  1. 20190102xlVBA_多表按姓名同时拆分

    Sub 多表按姓名同时拆分20190102() AppSettings Dim StartTime As Variant Dim UsedTime As Variant StartTime = VBA ...

  2. 7 selenium 模块

    selenium 模块 一.简介 1.Python的一个第三方库,对外提供的接口可以操作浏览器,然后让浏览器完成自动化的操作. 2.自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接 ...

  3. 4.1.5 Georigia and Bob

    Problem description: Georgia and Bob 在玩一个游戏. 如图所示,排成直线的格子上放有n个棋子.棋子 i 在左数第 Pi 个格子上.Georgia 和 Bob 轮流选 ...

  4. FileZilla 客户端连接 FlieZilla 服务器 连接成功读取目录列表却失败的解决办法

    解决过程: 第一步: 第二步:

  5. 3月19 HTML静态网页的制作

    HTML :内容(Hyper Text Markup Language,超文本标记语言) <html>---开始标签 <head> 网页上的控制信息 <title> ...

  6. poj-2115-exgcd

    C Looooops Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 32062   Accepted: 9337 Descr ...

  7. 模拟数据库丢失undo表空间

    数据库无事务情况下丢失undo表空间数据文件 1. 查看当前undo表空间,并删除物理undo文件 SYS@userdata>show parameter undo_tablespace; NA ...

  8. Django之cookie+session

    前言 HTTP协议 是短连接.且状态的,所以在客户端向服务端发起请求后,服务端在响应头 加入cokie响应给浏览器,以此记录客户端状态: cook是来自服务端,保存在浏览器的键值对,主要应用于用户登录 ...

  9. PHP闭包函数

    # 提到闭包就不得不想起匿名函数,也叫闭包函数(closures),貌似PHP闭包实现主要就是靠它.声明一个匿名函数是这样: $func = function() { }; //带结束符 # 可以看到 ...

  10. Linux Shell数值比较和字符串比较及相关

    说明: 1. 把字符串当成整型进行比较,由于abcd等字符对不上0123当程序尝试去转成二进制时无法完成转换,所以用于数值比较的运算不能用于字符串比较:但是把整型当成字符串进行比较,0123这些数值完 ...