首先将 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. linux 如何释放缓存

    操作: 同步 sync 释放所有缓存 echo 3 > /proc/sys/vm/drop_caches 原理: sync 将所有未写的系统缓冲区写到磁盘中,包含已修改的 i-node.已延迟的 ...

  2. yarn基础解释

    https://yarnpkg.com/zh-Hans/docs Yarn 对你的代码来说是一个包管理器, 你可以通过它使用全世界开发者的代码,或者分享自己的代码. 代码通过包(package)(或者 ...

  3. Nested Comment Treads in ROR

    建立一个嵌套的评论 建立数据库结构和嵌套视图(使用Stimulus取元素和绑event) 可以删除评论,可以对嵌套视图的层数进行控制. 用Ajax代替完全的刷新页面. 删除一个评论,但不丢失它的子评论 ...

  4. SPL之Iterator和ArrayAccess的结合使用

    <?php namespace TabControl; class MyIterator implements \Iterator, \ArrayAccess { private $data = ...

  5. adb 转自github https://github.com/mzlogin/awesome-adb

    基本用法 命令语法 adb 命令的基本语法如下: adb [-d|-e|-s <serialNumber>] <command> 如果只有一个设备/模拟器连接时,可以省略掉 [ ...

  6. vue路由守卫应用，监听是否登录

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...

  7. sonar-gerrit plugin配置

    配置 sonar-gerrit plugins stepspre-condition:1. Sonarqube(5.5及以上,本文使用的版本为6.1.3)关于如何安装配置Sonarqube,请参考其他 ...

  8. docker实战系列之快速删除docker中的容器

    1.停用全部运行中的容器 docker stop $(docker ps -q) 2.删除全部容器 docker rm $(docker ps -aq) 3.停用并删除容器 docker stop $ ...

  9. Python装饰器--decorator

    装饰器 装饰器实质是一个函数,其作用就是在不改动其它函数代码的情况下,增加一些功能.如果我们需要打印函数调用前后日志,可以这么做 def log(func): print('%s is running ...

  10. PHP如何自定义PHP内置函数

    其实对于PHP程序员,有个纯PHP的解决方案.在php.ini里有个配置项 auto_prepend_file,可以设置一个PHP文件作为每次执行前自动加载的文件. 在这个文件里写函数,你就可以当成定 ...