css 平行四边
在视觉设计中,平行四边形往往给人一种动感。
要生成一个平行四边形,只要通过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 平行四边的更多相关文章
- css圆角 四边投影
-moz-border-radius: 30px;-webkit-border-radius: 30px; border-radius:30px; -webkit-box-shadow:0 0 10p ...
- 使用css打造形形色色的形状!
使用css打造形形色色的形状! css是非常强大的工具,如果我们掌握的好,那么许多复杂的形状不需要使用图片而直接使用css完成即可,这不仅有利于减少http请求以增强性能还便于日后的管理和维护,一举两 ...
- CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形
本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...
- 「CSS」css基础
1. 文字水平居中 将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center; 2. 容器水平居中 先该容器设置一个明确宽度,然后将margin的水平值 ...
- CSS深入了解border:利用border画三角形等图形
三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...
- 基于 HTML5 的 WebGL 技术构建 3D 场景(一)
今天和大家分享的是 3D 系列之 3D 预定义模型. HT for Web 提供了多种基础类型供用户建模使用,不同于传统的 3D 建模方式,HT 的建模核心都是基于 API 的接口方式,通过 HT 预 ...
- 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 ...
- for 循环 正方形
<?php//================================正方形//for($q = 1; $q <= 5; $q ++ ){// for($z =1; $z & ...
- java 向上转型 向下转型
//父类 四边形 class Quadrangle{ public static void draw (Quadrangle q){ } } //子类 public class Parallelog ...
随机推荐
- SDUT OJ 数据结构实验之排序一:一趟快排
数据结构实验之排序一:一趟快排 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descrip ...
- jeesite模块解析,功能实现
做为十分优秀的开源框架,JeeSite拥有着很多实用性的东西. 默认根路径跳转 定义了无Controller的path<->view直接映射 <mvc:view-controller ...
- Day45--js基本小结
JavaScript基本总结 一:基本背景 01:注:ES6就是指ECMAScript 6.(2015 ECMAScript6 添加类和模块) ECMAScript和JavaScript的关系 199 ...
- matlab的pdist函数详解
Pairwise distance between pairs of object(Pdist函数用于各种距离的生成) 语法: D=pdist(x) D=pdist(x,distance) 解释: D ...
- Django-admin 的使用
admin 组件的使用 Django 提供功能十分强大的后台管理组件 admin 来实现自动管理. admin 是一个组件,与 APP 一样,项目启动一开始就加载了.在 setting.py 中的 I ...
- Covering(矩阵快速幂)
Bob's school has a big playground, boys and girls always play games here after school. To protect b ...
- MNIST数据集分类简单版本
import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data #载入数据集 mnist = ...
- drf序列化器的实例
应用目录结构: views.py from django.shortcuts import render # Create your views here. from django.views imp ...
- QWebView使用
问题: 开始编译的时候在pro文件中要加上 QT += core gui webkitwidgets 文件使用部分加上 #include<QtWebKitWidgets/QWebView&g ...
- 关于工具类静态方法调用@Autowired注入的service类问题
@Component //此处注解不能省却(0) 1 public class NtClient { 2 /** 3 * 日志 4 */ 5 private static String clazzNa ...