提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

[CSS] Create Complex Shapes with CSS Clip Path and Border Radiusc (border-radius & clip-path)

ampCSS and with create path border CLIP
2023-09-14 09:00:47 时间

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.

https://egghead.io/lessons/css-create-complex-shapes-with-css-clip-path-and-border-radius?pl=create-css-illustrations-b24c

*,
*: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%);

 

相关文章