形状


title: 形状
date: 2016-10-24
tags: CSS Secrets


0x00 border-radius

border-radius 有一个鲜为人知的属性,它可以单独指定水平和垂直半径,只要用斜杠(/) 分隔这两个值即可。此外,它不仅可以接受数值单位,还可以接受百分比值。而这个百分比会基于元素的尺寸进行解析。

所以,要创建一个自适应的椭圆,只需将两个方向(水平和垂直)的半径都设置为 50%

#box{
    width:400px;
    height:200px;                                   border-radius: 50% / 50%;
}
// or 进一步简化
border-radius: 50%;
椭圆

大值特性和等比例特性

此外,border-radius 还有两个特性:大值特性等比例特性

大值特性

也就是值很大的时候,只会使用能够渲染的圆角大小渲染。大值特性相对于元素自身的 width ,height而言。

#box {
width: 200px;
height: 200px;
background: deeppink;   
border-radius: 50%; 
/*border-radius:100%*/
/*border-radius: 100px*/
/*border-radius:200px;*/
/*border-radius: 400px*/
}

如下,上面的渲染结果都是一样的,即最大渲染半径只能是 50%,100px;

border-radius的大值特性
等比例特性

等比例特性:水平半径和垂直半径的比例是恒定不变的。等比例特性相对设置的 border-radius 参数的比例而言的

#box {
width: 200px;
height: 300px;
background: deeppink;   
border-radius: 300px 0 0 0/300px 0 0 0;

}
等比例特性

元素占据宽度200像素,高度300像素。所以,根据大值特性,水平方向的300像素只能按照200像素半径渲染;再根据等比例特性,虽然垂直方向理论上的最大半径是300像素,但是受制于当初设定的300px300px的1:1比例,垂直方向最终渲染的半径大小也是200像素。于是,我们最后得到的只是一个200像素200像素的圆弧。

最后值得注意的是,border-radius 属性中前面的方位关键字和后面的半径方位是不匹配.它们的关系是:border-垂直-水平-radius: 水平 垂直

OK,了解上面的东西以后我们可以开始使用 border-radius 来实现许多形状了,比如:

半椭圆
#box {
    width: 200px;
    height: 300px;
    background: deeppink;   
    border-radius: 50% / 100% 100% 0 0 ;
}
半椭圆
四分之一椭圆
#box {
    width: 200px;
    height: 300px;
    background: deeppink;   
    border-radius: 100% 0 0 0;
}
四分之一椭圆

0x01 平行四边形

我们很容易想到对矩形使用 skew() 变形属性来达到我们想要的效果,但是,这样势必导致其元素中的内容也会跟着被拉伸,于是,我们想到使用伪元素。

#box {
    width: 100px;
    height: 40px;
    margin: 100px auto;
    margin-left:400px;          
    text-align: center;
    line-height: 40px;
    /*其它文字,颜色,内边距等样式...*/               
    position: relative;
    /*设置宿主元素为相对定位*/

}

#box:before {
    /*使用伪元素来生成一个矩形*/
    content: '';
    position: absolute;
    /*设置伪元素为绝对定位*/
    left:0;
    top:0;
    right:0;
    bottom: 0;
    /*设置伪元素所有偏移量为0,使其自动继承宿主元素尺寸*/
    z-index: -1;
    /*将伪元素堆叠层次至于宿主元素之后*/
    background: deeppink;   
    transform:skewX(45deg);
    /*使用skewX()变形*/
    border:1px solid red;
}
伪元素生成平行四边形

这技巧的关键在于,利用伪元素及其定位属性产生了一个方块,然后对伪元素设置样式,并将其放置在宿主元素的下层。


0x02 菱形

.picture{
    width: 200px;
    height: 200px;
    transform: rotate(45deg);
    margin: 200px auto;
    overflow: hidden;

}

.picture>img{
    height: 100%;
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
    /*正方形的斜边使其对角线的1.42倍*/
}
菱形

是的,我们很容易想到使用 transform:rotate() 属性来对容器进行旋转,然后对其中的图片进行逆向旋转,但是我们可能不太容易想到使用 skew() 属性对其进行缩放。

其实,道理也蛮简单,当使用 max-width 时,100% 会被解析为容器的边长,但是我们想要的的是图片的宽度与容器的对角线相等,而不是边长,并且 skew() 是以元素本身的中心点进行缩放的,而 width 则只会以其左上角为原点进行缩放。基于此,我们使用 勾股定理结合skew实现了一个菱形的效果。


0x02 梯形

梯形可以使用 CSS 中3D旋转来模拟。但不同于 2D 对元素使用 3D 变形以后,其内部的变形效应是不可逆转的。所以,我们有想到了伪元素。

.tab{
    position: relative;
    display: inline-block;
    padding: .5em 1em .35em;
    color: white;

}
.tab:before{
    content: "";
    /*用伪元素来生成一个矩形*/
    position:absolute;
    left:0; right:0; top:0; bottom: 0;
    z-index: -1;
    background: #58a;
    transform-origin: bottom;
    /*使用 transform-origin 属性当在 3D 空间旋转时 将其底边固定住*/
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
    /*使用 scaleY() 属性在 Y 轴上扩展以此抵消因为 3D 旋转在元素垂直方向上的高度落差*/
}
梯形

我们很好的模拟出来一个梯形,而且只需改变 transform-origin 的值为 left,right就可以得到左倾斜或者右倾斜的梯形标签页了。

.nav{
    font-size: 0;
    margin: 0 auto;
 }

.nav>a{
    position: relative;
    display: inline-block;
    padding: .5rem 1rem 0;
    color: white;
    font-size: 1rem;

}
.nav>a:before{
    content: "";
    /*用伪元素来生成一个矩形*/
    position:absolute;
    left:0; right:0; top:0; bottom: 0;
    z-index: -1;
    background: #333;
    background-image: linear-gradient(hsla(0,0%,100%,.06) hsla(0,0%,100%,0))
    border:1px solid rgba(0,0,0,0.4);
    border-bottom: none;
    border-radius: .5em .5em 0 0;
    box-shadow: 0 .15em white inset;

    transform-origin: left;
    /*使用 transform-origin 属性当在 3D 空间旋转时 将其底边固定住*/
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
    /*使用 scaleY() 属性在 Y 轴上扩展以此抵消因为 3D 旋转在元素垂直方向上的高度落差*/
}
梯形标签页导航栏
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容

  • 一.自适应的椭圆 问题: 我们肯定都注意到过,我们给一个正方形元素添加一个足够大的border-radius(指定...
    FlyingWWS阅读 709评论 0 2
  • 在制作页面时,常用CSS画各种形状带代替img,这样可以免去一次HTTP请求。而且有些基本形状用CSS实现比切图更...
    张歆琳阅读 2,438评论 1 19
  • 大家好,我是IT修真院北京分院25期的学员,一枚正直纯洁善良的web前端程序员 今天给大家分享一下,修真院官网cs...
    be684ac78b0c阅读 1,245评论 0 1
  • 回顾那个只能用图片展示形状的日子,之前接触前端的小伙伴们,大家一定会有颇多感触,好在现在我们可以使用纯CSS实现更...
    叮咯咙咚DQ阅读 9,511评论 0 7
  • 1.自适应椭圆 思路:border-radius可以单独指定水平和垂直半径,用百分比来表示 半椭圆 思路:bord...
    阿r阿r阅读 1,506评论 0 1