CSS中的形状变换

1.自适应椭圆

思路：border-radius可以单独指定水平和垂直半径，用百分比来表示

div {

               width:16em;

               height:10em;

               background:#fb3;

               border-radius:50%;

}
Paste_Image.png

半椭圆

思路：border-radius可以从左上角开始顺时针设置四个角的值

div {

               width:16em;

               height:10em;

               background:#fb3;

               border-radius:50% / 100% 100% 0 0;//水平全部为 50% ,垂直方向依次为100% 100% 0 0

}
Paste_Image.png
div {

               width:16em;

               height:10em;

               background:#fb3;

               border-radius:100% 0 0 100% / 50%;

}
Paste_Image.png

四分之一椭圆

div {

               width:16em;

               height:10em;

               background:#fb3;

               border-radius:100% 0 0 0;

}
Paste_Image.png

2.平行四边形

要求：容器变形，内容保持垂直

嵌套元素方案

思路：对内容再次应用skew()变形，从而抵消容器的变形效果

<a href="#yolo" class="button"><div>Click me</div></a>

<button class="button"><div>Click me</div></button>

 

.button {transform:skewX(45deg);}

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

 

.button {

               display:inline-block;

               padding:.5em 1em;

               border:0;margin:.5em;

               background:#58a;

               color:white;

               text-transform:uppercase;

               text-decoration:none;

               font:bold 200%/1sans-serif;

}
Paste_Image.png

伪元素方案

思路：把所有样式应用到伪元素上，然后对伪元素进行变形

为宿主元素设置position:relative;伪元素设置position:absolute;让伪元素自动继承宿主元素的属性。

Paste_Image.png
<a href="#yolo" class="button"><div>Click me</div></a>

<button class="button"><div>Click me</div></button>

.button {

               position:relative;

               /*其他文字、边距样式*/

}

 

.button::before {

               content:'';/* To generate the box */

               position:absolute;

               top:0;right:0;bottom:0;left:0;/*设置偏移量为0，让伪元素拉伸到宿主尺寸*/

               z-index:-1;/*图层放在内容之下*/

               background:#58a;

               transform:skew(45deg); /*伪元素变形*/

}

3.菱形图片

基于变形的方案

思路：容器先转45度，内容再反转回来。同时放大补充出现的空白区。

用scale(1.42)对图片进行放大是以图片原点为中心的放大。

width的放大是基于左上角的放大。

.diamond {

               width:250px;

               height:250px;

               transform:rotate(45deg);

               overflow:hidden;

               margin:100px;

}

 

.diamond img {

               max-width:100%;

               transform:rotate(-45deg) scale(1.42);

               z-index:-1;

               position:relative;

}
Paste_Image.png

裁切路径方案

变形方案对于非正方形图片有局限性，因此应用clip-path属性，进行裁剪，可以实现不同形状。

/**

 * Diamond images — via clip-path

 */

 

img {

               max-width:250px;

               margin:20px;

               -webkit-clip-path:polygon(50% 0,
100% 50%, 50% 100%, 0 50%);/*以坐标点为四个参数*/

               clip-path:polygon(50% 0,
100% 50%, 50% 100%, 0 50%);/*动画用同一种形状函数*/

               transition:1s;/*动画的时间间隔*/

}

 

img:hover {/*鼠标悬停时，出现全部图案*/

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

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

}
Paste_Image.png
img {

               max-width:250px;

               margin:20px;

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

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

               transition:1s;

}

 

img:hover {

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

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

}
Paste_Image.png

4.切角效果

渐变色方案

直角切角

思路：应用渐变。

注意：为防止相互覆盖，大小要限定，并且取消重复。

div {

               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;

               

               padding:1em 1.2em;

               max-width:12em;

               color:white;

               font:150%/1.6 Baskerville,
Palatino, serif;

}
Paste_Image.png
弧形切角
div {

               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;

               

               padding:1em 1.2em;

               max-width:12em;

               color:white;

               font:130%/1.6 Baskerville,
Palatino, serif;

}
Paste_Image.png

内联SVG与border-image方案

原理：应用border-image的切片填充原理。

 div {

               border:21px solid transparent;

               border-image:1 /*这里的1是SVG文件的坐标系统，不需要单位*/

url('data:image/svg+xml,\

          <svg xmlns="http://www.w3.org/2000/svg" width="3"
height="3" fill="%2358a">\

          <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2" />\

   </svg>');

               background:#58a;

               background-clip:padding-box;

               

               padding:.2em .3em;

               max-width:12em;

               color:white;

               font:150%/1.6 Baskerville,
Palatino, serif;

}
Paste_Image.png

裁切路径方案

div {

               background:#58a;

               -webkit-clip-path:

                               polygon(20px 0, calc(100%
- 20px) 0, 100% 20px, 100% calc(100% - 20px),

                               calc(100% - 20px)
100%,

                               20px 100%, 0 calc(100%
- 20px), 0 20px);

               clip-path:

                                             polygon(20px
0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),

                                             calc(100%
- 20px) 100%,

                                             20px
100%, 0 calc(100% - 20px), 0 20px);

               

               padding:1em 1.2em;

               max-width:12em;

               color:white;

               font:150%/1.6 Baskerville,
Palatino, serif;

}

5.梯形标签页

思路：采用3D旋转实现效果，把变形效果作用在伪元素上。

关键语句

rotateX(angle)

定义沿着 X 轴的3D 旋转。

Paste_Image.png
transform: perspective(.5em) rotateX(5ged);//变换

transform: scaleY(1.3); //修正Y方向的缩水

transform-origin: bottom;//防止图像位置下移

nav > a {

               position:relative;

               display:inline-block;

               padding:.3em 1em 0;

               color:inherit;

               text-decoration:none;

               margin:0 -.3em;

}

 

nav >
a::before,

main {

               border:.1em solid rgba(0,0,0,.4);

}

 

nav a::before {

               content:'';/* To generate
the box */

               position:absolute;

               top:0;right:0;bottom:0;left:0;

               z-index:-1;

               border-bottom:none;

               border-radius:.5em .5em 0 0;

               background:#ccc linear-gradient(hsla(0,0%,100%,.6),
hsla(0,0%,100%,0));

               box-shadow:0 .15em white
inset;

               transform:scale(1.1, 1.3) perspective(.5em)
rotateX(5deg);

               transform-origin:bottom;

}
Paste_Image.png

当
transform-origin: bottom left;

Paste_Image.png

当transform-origin:bottom right;

Paste_Image.png

6.简单的饼图

圆

.pie {

               width:100px;height:100px;

               border-radius:50%;

               background:yellowgreen; 

               background-image:linear-gradient(to right, transparent 50%, currentColor 0);//把绿色圆的右半部分弄成棕色

               color:#655;

}
Paste_Image.png
.pie::before {//设置伪元素的样式，绿色半圆

               content:'';

               display:block;

               margin-left:50%;

               height:100%;

               border-radius:0 100% 100% 0 / 50%;

               background-color:inherit;//继承了绿色

               transform-origin:left; //旋转中心为圆心

               animation:spin3s linear infinite, bg 6s step-end infinite;

}

@keyframes spin{

               to {transform:rotate(.5turn);}//当小于.5turn时，可以直接旋转伪元素

}

@keyframes bg{

               50% {background:currentColor;}//当大于.5turn时，改变伪元素的背景色

}
Paste_Image.png
Paste_Image.png

SVG方案

/**

 * Pie charts — with SVG

 */

 

.pie {

               width:100px;

               height:100px;

               display:inline-block;

               margin:10px;

               transform:rotate(-90deg);

}

 

svg {

               background:yellowgreen;

               border-radius:50%;

}

 

circle {

               fill:yellowgreen;

               stroke:#655;

               stroke-width:32;

}

 

@keyframes grow{to {stroke-dasharray:100 100 }}

 

.pie.animated circle {

               animation:grow2s infinite linear;

}

本文整理自《CSS揭秘》

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,542评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,596评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,021评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,682评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,792评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,985评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,107评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,845评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,299评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,441评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,072评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2赞 350

推荐阅读更多精彩内容

  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 1,736评论 0赞 2
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,306评论 0赞 11
  • 《CSS揭秘》阅读笔记
    我还记得国外某位大牛在一篇文章中写道，CSS is fine, it's just really hard。读完他...
    garble阅读 1,083评论 0赞 0
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1赞 92
  • 无标题笔记
    等等的ds
    margin阅读 168评论 0赞 1