自适应的椭圆
可以使用border-radius
将矩形元素设置成圆形
完整椭圆
border-radius
可以单独指定水平半径和垂直半径,通过/
分隔
1 2 3 4
| div { background: rgb(241, 176, 56); border-radius: 60px/20px; }
|
要想形成一个完整的椭圆,可以取长宽的一半作为长短半径,如果想生成自适应的椭圆,可以使用百分比
1 2 3 4
| div { background: rgb(241, 176, 56); border-radius: 50%; }
|
半椭圆
border-radius
是一个简写属性,包含:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
可以一次性向border-radius
传递多个值
如果传递四个值,四个值会分别从左上角开始以顺时针顺序分配到各个角
如果传递三个值,则依次分配给左上角、右上+左下、左下
如果传递两个值,则依次分配给左上+右下、右上+左下
也可以为四个角赋予不同的水平半径和垂直半径,用/
分隔
1 2 3 4
| div { background: rgb(241, 176, 56); border-radius: 100% 0 0 100% / 50%; }
|
1 2 3 4
| div { background: rgb(241, 176, 56); border-radius: 50% / 100% 100% 0 0; }
|
四分之一椭圆
1 2 3 4
| div { background: rgb(241, 176, 56); border-radius: 100% 0 0 0; }
|
平行四边形
通过skew()
可以对矩形进行拉伸
parallelogram
1 2 3
| div { transform: skewX(-20deg); }
|
这会导致div中的内容也会发生变形,解决方案有两种
嵌套元素方案
可以对内容进行一次反向的skew()
变形
1 2 3
| <div class="out"> <span class="in">parallelogram</span> </div>
|
1 2 3 4 5 6 7
| .out { transform: skewX(-20deg); } .in { display: inline-block; transform: skew(20deg); }
|
parallelogram
伪元素方案
把所有样式应用到伪元素上,对伪元素进行变形
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| .parallelogram-pseudo { position: relative; width: 60%; height: 100px; text-align: center; font-size: 30px; line-height: 100px; } .parallelogram-pseudo::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: rgb(241, 176, 56); transform: skew(-20deg); }
|
parallelogram
菱形图片
切角效果
渐变方案
可以以45deg位方向做线性渐变
1 2 3
| div { background: linear-gradient(45deg, transparent 30px, #69b 0) }
|
切掉两个角:
1 2 3 4 5 6
| div { background: linear-gradient(-135deg, transparent 42.43px, #69b 0) top, linear-gradient(-45deg, transparent 42.43px, #69b 0) bottom; background-size: 100% 50%; background-repeat: no-repeat; }
|
切掉四个角:
1 2 3 4 5 6 7 8
| div { background: linear-gradient(135deg, transparent 20px, #69b 0) top left, linear-gradient(-135deg, transparent 20px, #69b 0) top right, linear-gradient(-45deg, transparent 20px, #69b 0) bottom right, linear-gradient(45deg, transparent 20px, #69b 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; }
|
内凹圆角:
1 2 3 4 5 6 7 8
| div { background: radial-gradient(circle at top left, transparent 20px, #69b 0) top left, radial-gradient(circle at top right, transparent 20px, #69b 0) top right, radial-gradient(circle at bottom right, transparent 20px, #69b 0) bottom right, radial-gradient(circle at bottom left, transparent 20px, #69b 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; }
|
裁剪路径方案
可以使用clip-path
属性裁剪出切角
1 2 3 4 5 6 7
| div { background: #58a; -webkit-clip-path: polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px)); clip-path: polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px)); }
|
梯形标签页
由于透视的关系,通过将矩形旋转可以形成梯形,需要设置transform-origin
固定底边,设置scaleY
补足高度
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| div { position: relative; } div::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #58a; transform: scaleY(1.3) perspective(.5em) rotateX(2deg); transform-origin: bottom; }
|
Trapezoid
在Safari浏览器中3D transform变换可能会导致z-index渲染异常,解决办法见《Safari中transform3D变换导致的z-index异常》
一种梯形导航栏的写法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <div class="my-nav"> <nav class="both-side"> <a href="#">Home</a> <a href="#" class="selected">Projects</a> <a href="#">About</a> </nav> <main>Content area</main> <nav class="left"> <a href="#">Home</a> <a href="#" class="selected">Projects</a> <a href="#">About</a> </nav> <main>Content area</main> <nav class="right"> <a href="#">Home</a> <a href="#" class="selected">Projects</a> <a href="#">About</a> </nav> <main>Content area</main> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
| .my-nav { padding: 40px; font: 130%/2 Frutiger LT Std, sans-serif; } nav { position: relative; z-index: 1; padding-left: 1em; } nav > a { position: relative; display: inline-block; padding: .3em 1em 0; color: inherit; text-decoration: none; margin: 0 -.3em; } nav a::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; 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; } nav a.selected { z-index: 2; } nav a.selected::before { border-bottom: .1em solid #eee; background-color: #eee; margin-bottom: -.08em; } main { display: block; margin-bottom: 1em; background: #eee; padding: 1em; border-radius: .15em; } nav.left > a::before { transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg); transform-origin: bottom left; } nav.right { padding-left: 2em; } nav.right > a::before { transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg); transform-origin: bottom right; }
|