css3形状篇

形状是网页中必不可少的一部分,它使得网页更加生动和精致,接下来就让我们开启css3形状之旅！

程序员必读

Css3：box-shadow高级应用

1.制做平行四边形/棱形/梯形

知识点: transform: skew(deg),  //skew代表斜切,值为角度
transform-origin: bottom/left/top(默认)/right 变换源点的位置

平行四边形

梯形

• 核心代码

/* 对伪类添加变形 */
.sp-1::before{
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: #06c;
  transform: skew(45deg);
}
/* 梯形 */
transform: scaleY(2) perspective(.5em) rotateX(5deg);
transform-origin: bottom;

2.制做切角效果

知识点: 利用背景渐变

切角

圆形切角

• 核心代码

/* 正切角 */
background: linear-gradient(-135deg,transparent 12px,#06c 0);
/* 圆形切角 */
background: radial-gradient(circle at top left,transparent 12px,#06c 0) no-repeat 0 0;