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

要生成一个平行四边形,只要通过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. SDUT OJ 数据结构实验之排序一:一趟快排

    数据结构实验之排序一:一趟快排 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descrip ...

  2. jeesite模块解析,功能实现

    做为十分优秀的开源框架,JeeSite拥有着很多实用性的东西. 默认根路径跳转 定义了无Controller的path<->view直接映射 <mvc:view-controller ...

  3. Day45--js基本小结

    JavaScript基本总结 一:基本背景 01:注:ES6就是指ECMAScript 6.(2015 ECMAScript6 添加类和模块) ECMAScript和JavaScript的关系 199 ...

  4. matlab的pdist函数详解

    Pairwise distance between pairs of object(Pdist函数用于各种距离的生成) 语法: D=pdist(x) D=pdist(x,distance) 解释: D ...

  5. Django-admin 的使用

    admin 组件的使用 Django 提供功能十分强大的后台管理组件 admin 来实现自动管理. admin 是一个组件,与 APP 一样,项目启动一开始就加载了.在 setting.py 中的 I ...

  6. Covering(矩阵快速幂)

    Bob's school has a big playground, boys and girls always play games here after school.  To protect b ...

  7. MNIST数据集分类简单版本

      import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data #载入数据集 mnist = ...

  8. drf序列化器的实例

    应用目录结构: views.py from django.shortcuts import render # Create your views here. from django.views imp ...

  9. QWebView使用

      问题: 开始编译的时候在pro文件中要加上 QT += core gui webkitwidgets 文件使用部分加上 #include<QtWebKitWidgets/QWebView&g ...

  10. 关于工具类静态方法调用@Autowired注入的service类问题

    @Component //此处注解不能省却(0) 1 public class NtClient { 2 /** 3 * 日志 4 */ 5 private static String clazzNa ...