形状

一 自适应的椭圆

1.难题
1> 圆
你可能注意到过, 给任何正方形元素设置一个足够大的border-radius,
就可以把它变成一个圆形。所用到的CSS 代码如下所示:

 #bd {
width: 200px;
height: 200px;
background: #fb3;
border-radius: 100px; /* >= 正方形边长的一半 */
}

*当任意两个相邻圆角的半径之和超过border box 的尺寸时,用户
代理必须按比例减小各个边框半径所使用的值,直到它们不会相互重叠
为止

2> 椭圆
如果它的宽高相等,就显示为一个圆;如果宽
高不等,就显示为一个椭圆

2.解决方案
说到border-radius,有一个鲜为人知的真相:它可以单独指定水平
和垂直半径,只要用一个斜杠(/)分隔这两个值即可。这个特性允许我
们在拐角处创建椭圆圆角

因此,如果我们有一个尺寸为
200px × 150px 的元素,就可以把它圆角的两个半径值分别指定为元素宽高的
一半,从而得到一个精确的椭圆:

#bd {
width:200px;
height:100px;
border-radius:100px/50px;
}

但是,这段代码存在一个很大的缺陷:只要元素的尺寸发生变化,
border-radius 的值就得跟着改。我们在图3-5 中可以看到,当元素的尺寸
变为200px×300px 时,如果border-radius 没有跟着改变,会发生什么后
果。因此,如果我们的元素尺寸会随着它的内容变化而变化,这就是一个问
题了。

它不仅可以接受长度值,还可以接受百分比值
这个百分比值会基于元素的尺寸进行解析,即宽度用于水平半径的解析,而高度
用于垂直半径的解析。这意味着相同的百分比可能会计算出不同的水平和垂
直半径。

#bd {
border-radius:50%;
}

3.半椭圆
我们甚至可以为所有四个角提供完全不同的水平和垂
直半径,方法是在斜杠前指定1~4 个值,在斜杠后指定另外1~4 个值。请注
意这两组值是单独展开为四个值的。举例来说,当border-radius 的值为
10px / 5px 20px 时,其效果相当于10px 10px 10px 10px / 5px 20px
5px 20px。

#bd {
border-radius:50%/100% 100% 0 0;
}

半椭圆是可以变成半圆的,只要它的宽度刚好伸展到高度的两倍(或者对一个沿纵轴劈开的
椭圆来说,是高度伸展为宽度的两倍

4.四分之一椭圆
要创建一个四分之一椭圆,其中一个角的水平和垂直半径值都需要是
100%,而其他三个角都不能设为圆角。

#bd {
border-radius:100% 0 0 0;
}

二 平行四边形

1.难题
使用skew()来进行斜向拉伸实现 平行四边形
一个参数时:表示水平方向的倾斜角度
两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度

#box {
transform:skew(-45deg);
}

但是,这导致它的内容也发生了斜向变形,这很不好看,而且难读。
有没有办法只让容器的形状倾斜,而保持其内容不变呢?

2.且套元素方案
我们可以对内容再应用一次反向的skew() 变形,从而抵消容器的变形
效果,最终产生我们所期望的结果。

<a href="#yolo" class="button">
<div>Click me</div>
</a>
<style>
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }
</style>

3.伪元素方案
另一种思路是把所有样式(背景、边框等)应用到伪元素上,然后再对
伪元素进行变形。因为我们的内容并不是包含在伪元素里的,所以内容并不
会受到变形的影响。下面来看看这个技巧能否得到与前面相同的链接样式。
此时,用伪元素生成的方块是重叠在内容之上 可以给伪元素设置z-index: -1 样式

.button {
width:200px;
height:200px;
position: relative;
/* 其他的文字颜色、内边距等样式…… */
}
.button::before {
content: ''; /* 用伪元素来生成一个矩形 */
position: absolute;
top:; right:; bottom:; left:;
width:inherit;
height:inherit;
z-index: -1;
background: #58a;
transform: skew(45deg);
}

三 棱形图片

1.难题
使用rotate()

2.基于变形的方案
需要把图片用一个<div> 包裹起来,然后对其应用相反的rotate()
变形样式:

<div class="picture">
<img src="adam-catlace.jpg" alt="..." />
</div>
.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg);
}

以上产生一个 八角形 的图片 并没有产生棱形

可以使用scale()解决:

.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}

3.裁切路径方案
上面的方法确实可以奏效,但它基本上是一个hack。这个方法需要一层
额外的HTML 标签,这不够简洁;代码本身也不够直观;它甚至还不够健
壮——如果我们碰巧要处理一张非正方形的图片,这个小把戏就会原形毕露

事实上,我们还有一个更好的办法来完成这个任务。它的主要思路是
使用clip-path 属性。

裁切路径允许我们把元素裁剪为我们想要的任何形状。在这个例子
中,我们将会使用polygon()(多边形)函数来指定一个菱形。实际上,它
允许我们用一系列(以逗号分隔的)坐标点来指定任意的多边形。我们甚至
可以使用百分比值,它们会解析为元素自身的尺寸。代码如下所示:

-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

四 切角效果

1.难题

2.解决方案
1> 利用渐变
右下角:

#box {
background: #58a;
background:
linear-gradient(-45deg, transparent 15px, #58a 0);
}

四角:

#box {
background: #58a;
background:
linear-gradient(135deg, transparent 15px, #58a 0)
top left,
linear-gradient(-135deg, transparent 15px, #58a 0)
top right,
linear-gradient(-45deg, transparent 15px, #58a 0)
bottom right,
linear-gradient(45deg, transparent 15px, #58a 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}

3.弧形切角
可以用来创建弧形切角(很多人也把这种
效果称为“内凹圆角”,因为它看起来就像是圆角的反向版本)。唯一的区别
在于,我们会用径向渐变来替代上述线性渐变:

#box {
background: #58a;
background:
radial-gradient(circle at top left,
transparent 15px, #58a 0) top left,
radial-gradient(circle at top right,
transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right,
transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left,
transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}

五 梯形标签页

1.难点
一直以来,梯形
都是众所周知难以用CSS 生成的形状,

2.解决方案

transform: perspective(.5em) rotateX(5deg);

整个元素应用3D 变形的,因此它上面的文字也变形了。对元素使用了3D
变形之后,其内部的变形效应是“不可逆转”的,这一点跟2D 变形不同
(在2D 变形的体系之下,内部的逆向变形可以抵消外部的变形效应)
唯一可行的途径就是把变形效果作用在伪元
素上。

.tab {
position: relative;
display: inline-block;
padding: .5em 1em .35em;
color: white;
}
.tab::before {
content: ''; /* 用伪元素来生成一个矩形 */
position: absolute;
top:; right:; bottom:; left:;
z-index: -1;
background: #58a;
transform: perspective(.5em) rotateX(5deg);
}

03--css形状--css揭秘的更多相关文章

  1. 鼠标形状css样式

    鼠标形状css样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 45个值得收藏的 CSS 形状

    摘要: CSS炫技. 原文:45个值得收藏的 CSS 形状 作者:前端小智 Fundebug经授权转载,版权归原作者所有. CSS能够生成各种形状.正方形和矩形很容易,因为它们是 web 的自然形状. ...

  3. 炫酷的 CSS 形状(值得收藏)

    在今日头条中看到炫酷的 CSS 形状,就记录一下: 1.圆形 #circle { width: 100px; height: 100px; background: red; border-radius ...

  4. [CSS]《CSS揭秘》第四章——视觉效果

    投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shad ...

  5. 奇妙的 CSS shapes(CSS图形)

    CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outsid ...

  6. 【Python全栈-CSS】CSS入门

    CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...

  7. 奇妙的 CSS shapes(CSS图形) 【css 图形,绘图,CSS 几何图形)】

    http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...

  8. 「CSS」css基础

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

  9. 盒模型 | CSS权重 | CSS层叠

    span{ color:red;} *{ font-family:"楷体";line-height:2em; font-size:18px;} 盒模型 CSS定义所有的元素都可能拥 ...

  10. CSS:CSS 实例

    ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...

随机推荐

  1. 使用 JSON-lib 出现异常 java.lang.reflect.InvocationTargetException

    我是在使用json时引起的这个异常,上面是使用json-lib用到的几个jar包,原因是在commons-lang3-3.1.jar这个jar上,commons-lang3和commons-lang会 ...

  2. Django创建和配置文件

    首先我们随便找一个文件 shift+鼠标右键 点击打开 Powershell 窗口 然后输入命令  django-admin startproject 项目名字 输入cd day   进入这个项目下 ...

  3. Spring Boot日志集成实战

    Spring Boot日志框架 Spring Boot支持Java Util Logging,Log4j2,Lockback作为日志框架,如果你使用starters启动器,Spring Boot将使用 ...

  4. 自动化测试工具selenium webdirver

    看视频学到的,自动化测试工具,可以模拟用户操作,包括输入,点击等操作 新建新文件夹 在命令行执行npm init  ,一路回车,把项目先初始化 安装  npm install selenium-web ...

  5. Postgresql ---plv8扩展(windows下安装过程)

    Postgresql下plv8安装过程其实很简单,但是在网络上搜集了半天都没有找到一篇满意的安装文档,现在总结如下: 1.下载和PostgreSQL相对应的plv8版本,下载地址如下: http:// ...

  6. 大叔力量VIP介绍

    VIP介绍 框架技术点 平台 仓储 日志收集 缓存 消息队列 服务总线 事务 任务调度 授权 模块化 服务发现 .net ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ - .net core ✔ ✔ ✔ ✔ ✔ ...

  7. 从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. HDFS-Architecture剖析

    1.概述 从HDFS的应用层面来看,我们可以非常容易的使用其API来操作HDFS,实现目录的创建.删除,文件的上传下载.删除.追加(Hadoop2.x版本以后开始支持)等功能.然而仅仅局限与代码层面是 ...

  9. Redis 哨兵

    作用 Redis Sentinel,即Redis哨兵,在Redis 2.8版本开始引入. 主要提供了配置提供者,通知,哨兵的监控和自动故障转移功能.哨兵的核心功能是主节点的自动故障转移. 下面是Red ...

  10. mysql格式化时间戳为日期

    MySQL中有一个像PHP的date函数一样的日期格式化函数DATE_FORMAT,使用这个函数时,需要像下面例子这样传递一个格式字符串和时间戳 SELECT DATE_FORMAT(NOW(),&q ...