[CSS] Create Complex Shapes with CSS Clip Path and Border Radiusc (border-radius & clip-path)
2023-09-14 08:59:13 时间
In this lesson, we explore creating the Egghead Shell with CSS. We explore how different properties allow us to create different shapes and how we can use our developer tools to adjust and tweak style values.
*, *:before, *:after { box-sizing: border-box; } :root { --bg: #ffd500; --shell: #fff; --shell-outline: #666; --size: 50; --unit: calc((var(--size) / 769) * 1vmin); } body { background-color: var(--bg); min-height: 100vh; } img { opacity: 0.5; } .egg { background-color: hsla(0, 100%, 50%, 0.2); } img, .egg { height: calc(769 * var(--unit)); width: calc(742 * var(--unit)); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .shell { height: 95%; width: 74%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .shell__piece--top { height: 108%; width: 106%; border-radius: 50% 50% 0 0 / 85% 85% 0 0; top: 0; clip-path: inset(0 0 70% 0); } .shell__piece--middle { height: 100%; width: 98%; border-radius: 50% 50% 0 0 / 85% 85% 0 0; clip-path: inset(32% 0 40% 0); } .shell__piece--bottom { bottom: 0; border-radius: 50% / 62% 62% 38% 38%; width: 100%; height: 100%; clip-path: inset(58% 0 0 0); } .shell__piece { background-color: var(--shell); border: calc(26 * var(--unit)) solid var(--shell-outline); position: absolute; left: 50%; transform: translate(-50%, 0); }
border-radius:
border-radius: 50% 50% 0 0 / 85% 85% 0 0;
first (50% + 85%)
x: top-left, move right 50%
y: top-left, move down 85%
second (50% + 85%)
x: top-right, move left 50%
y: top-right, move down 85%
first and second (0 0)
no changes
clip-path:
Image:
before:
after clip:
clip-path: inset(87% 45% 5% 46%);
相关文章
- KubeSphere 升级 && 安装后启用插件
- ICML 2022 NUS&NVIDIA提出完全注意力网络《FAN》,在分类、检测、分割多个CV任务上SOTA,代码已开源!
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- 怎么创建css样式表,怎样创建可反复使用的外部CSS样式表?[通俗易懂]
- Java魔法类 & Unsafe 未完结
- 【一Go到底】第二天---你好,Go and GOROOT&GOPATH
- Rook部署笔记 && RBD示例
- 【技术&管理&业务】我们该做何抉择?
- 7 Papers & Radios | 纯注意力或许没那么有用;从量子场看深度学习
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- DxO PureRAW mac&win(智能照片处理工具)介绍
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- CSS与MySQL合力提升网页性能(css与mysql结合)
- AMP MySQL升级提升数据库性能的必要之举(amp mysql升级)
- 实用的利用CSS+<em>标签来完成一个三角形的制作
- CSS规则层叠的应用css必须要注意的几点
- CSS教程之css选择器、属性、值
- phpforeach使用&(与运算符)引用赋值要注意的问题
- juqery学习之六CSS--css、位置、宽高
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)