在视觉设计中,平行四边形往往给人一种动感。

要生成一个平行四边形,只要通过css变形,就可做到:

-webkit-transform: skewX(-45deg);

  

那么生成一个平行四边形的按钮呢?列如下面这样的效果图:

通过第一次尝试,我使用了斜向变形:得到下面的效果图,发现里面的文字也进行了拉伸。

解决方案1:

有没有办法让容器形状倾斜,而其中的内容不拉伸呢?

办法就是,我们再对里面的内容进行一次反向skew()变形,所以我们首先得把里面的内容添加一层额外的元素进行包裹:

<a class="g"> <div> Click me</div> </a>

.g{-webkit-transform: skewX(-45deg);}
.g>div{-webkit-transform: skewX(45deg)}

最终能得到的正确的效果图。

解决方案2:

思路是,把所有的样式应用到伪元素上,然后再对伪元素进行变形。因为我们的内容不包含在伪元素里。so 可以使用伪元素方案:

.g{position: relative;
/*其他的文字样式,内边距等等*/} .g::before{ content:'';//用伪元素来生成一个矩形
position: absolute;
top:;right:;bottom:;left:;//所有的偏移量设置为0,以便于伪元素被拉至宿主元素的尺寸。
z-index: -2;
background: #58a;
-webkit-transform: skew(45deg);
}

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

  1. css圆角 四边投影

    -moz-border-radius: 30px;-webkit-border-radius: 30px; border-radius:30px; -webkit-box-shadow:0 0 10p ...

  2. 使用css打造形形色色的形状!

    使用css打造形形色色的形状! css是非常强大的工具,如果我们掌握的好,那么许多复杂的形状不需要使用图片而直接使用css完成即可,这不仅有利于减少http请求以增强性能还便于日后的管理和维护,一举两 ...

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

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

  4. 「CSS」css基础

    1. 文字水平居中 将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center; 2. 容器水平居中 先该容器设置一个明确宽度,然后将margin的水平值 ...

  5. CSS深入了解border:利用border画三角形等图形

    三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...

  6. 基于 HTML5 的 WebGL 技术构建 3D 场景(一)

    今天和大家分享的是 3D 系列之 3D 预定义模型. HT for Web 提供了多种基础类型供用户建模使用,不同于传统的 3D 建模方式,HT 的建模核心都是基于 API 的接口方式,通过 HT 预 ...

  7. Codeforces Round #388 (Div. 2) A,B,C,D

    A. Bachgold Problem time limit per test 1 second memory limit per test 256 megabytes input standard ...

  8. for 循环 正方形

    <?php//================================正方形//for($q = 1; $q <= 5; $q ++ ){//    for($z =1; $z & ...

  9. java 向上转型 向下转型

    //父类 四边形 class Quadrangle{ public static void draw (Quadrangle q){ } } //子类  public class Parallelog ...

随机推荐

  1. 在Ninject 向构造参数中注入具有相同类型的参数

    实际上这个有多种解决方法,加自定义Attribute,或Named(),但这些方式有一些侵入性,Named,要引用Ninject, 自定义Attribute,还要还要再写几行代码吗,所以使用下面的方法 ...

  2. 安装GCC-8.3.0及其依赖

    目录 目录 1 1. 前言 1 2. 安装日期 1 3. GCC国内镜像下载地址 2 4. GCC的依赖库 2 4.1. gmp库 2 4.2. mpfr库 2 4.3. mpc库 2 4.4. m4 ...

  3. day--39-MySQL的多表查询

    多表查询一:表的基本介绍 可以参考:https://www.cnblogs.com/cdf-opensource-007/p/6517627.html 建立一个员工表信息表和一个部门表,每个员工都对应 ...

  4. bzoj3098 Hash Killer II 生日共计

    题目传送门 题目大意: 让你构造一个字符串,使字符串在题目给出的哈希条件下统计出错. 思路:生日攻击,结论题,尚未理解. #include<bits/stdc++.h> #define C ...

  5. Codeforces - 185A 简单矩阵快速幂

    题意:求第n个三角形内部的上三角形个数 对每个三角形分别维护上下三角形个数,记为\(dp[1][i],dp[2][i]\) 规律很明显是 \(dp[1][i+1]=3*dp[1][i]+dp[2][i ...

  6. tp5.0

    入口文件绑定 : define('BIND_MODULE','admin/index'); 配置 auto_bind_moudle = ture|false.  入口自动绑定模块 入口文件 defin ...

  7. nginx-图片资源代理

    location ~ .*\.(gif|jpg|jpeg|png|bmp|mp3)$ { root E:/xx/Uploads/; } 记得放在根目录下面

  8. shell 实现文件改名

    修改文件名可以有不同的命令方式,mv 可以实现,但是使用rename 这种专业的改名字很好 对于单个的文件,可以直接使用以上的命令,那如果有大量的类似格式的文件名需要修改成其他格式的,该如何呢? 创建 ...

  9. D. Match & Catch 后缀自动机 || 广义后缀自动机

    http://codeforces.com/contest/427/problem/D 题目是找出两个串的最短公共子串,并且在两个串中出现的次数只能是1次. 正解好像是dp啥的,但是用sam可以方便很 ...

  10. Fedora中安装VLC播放器

    需要在机器上安装VLC,无奈不能直接通过yum安装,网上搜了一下,直接安装成功,其实挺简单的: 我的机器是Fedora15,其他的类似: ------------------------- 首先:su ...