首先将 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. English trip EM2-LP-6A Teacher:Julia

    课上内容(Lesson) How many children are in the family? there are 16 kids How old is the oldest child? He' ...

  2. 使用AutoCloseable 实现自动关闭资源

    一.认识AutoCloseable AutoCloseable接口位于java.lang包下,从JDK1.7开始引入. 1.在1.7之前,我们通过try{} finally{} 在finally中释放 ...

  3. HDOJ-1156 Brownie Points II 线段树/树状数组（模板）

    http://acm.hdu.edu.cn/showproblem.php?pid=1156 在一张二位坐标系中,给定n个点的坐标,玩一个划线游戏(线必须穿过点),Stan先手画一条垂直的线,然后Ol ...

  4. pytorch backward问题

    pytorch中关于backward的很有意思的一个问题 <https://blog.csdn.net/shiheyingzhe/article/details/83054238> 但是我 ...

  5. 求[1,n]中与m互素的个数

    void dfs(int d, ll num, int z) { if (d>cnt) { if (num!=1) ans+=z*n/num; } else { dfs(d+1,num*p[d] ...

  6. mac中 hosts地址

    /etc/hosts 拉出hosts文件,修改之后再拉进去

  7. 欧拉函数 牛客寒假1 小a与黄金街道

    题目链接 分析:这题用到了欧拉函数, 欧拉函数,用φ(n)表示 欧拉函数是求小于等于n的数中与n互质的数的数目 详细可以看看这篇博文https://www.cnblogs.com/linyujun/p ...

  8. activiti部署流程定义时出错：INSERT INTO ACT_GE_BYTEARRAY，修改数据库编码

    activiti部署流程定义时出错 // 部署流程定义 Deployment deployment = deploymentBuilder.deploy(); 错误信息:(有乱码的...没留下截图.. ...

  9. UI基础四：简单的assign block

    经常会有需求让在标准的order加个assign block,那就来简单说一下: 1.创建assign block组件ZXXXXXX 2.添加BTORDER节点和GUID属性 3.创建表视图(可配置, ...

  10. mybatis调用存储过程的两种方式

    先总结和说明一下注意点: 1.如果传入的某个参数可能为空,必须指定jdbcType 2.当传入map作为参数时,必须指定JavaType 3.如果做动态查询(参数为表名,sql关键词),可以使用${} ...