CSS3 制作各种形状

椭圆

自适应椭圆

用百分比定义border-radius的值。

div {
  border-radius: 50%;
}

半个椭圆

分别定义：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

或用border-radius的缩写：左上右上右下左下。

div {
  // 50%：宽；100%：高
  border-radius: 50% / 100% 100% 0 0;
}

另一个方向的半个椭圆：

div {
  border-radius: 100% / 50% 0 0 50%;
}

四分之一个椭圆

只需定义一个角的border-radius。

div {
  // 有弧度的一个角占 100%，其他都是 0
  border-radius: 100% 0 0 0;
}

平行四边形

原理：利用transform: skew()对长方形进行各种变形扭曲。

div {
  transform: skewX(-25deg);
}

注意：skew 变形会同时影响内部文字，需额外纠正。

div > span {
  // 对 inline 元素施加 transform 无效！
  display: inline-block;

  transform: skewX(25deg);
}

或者用伪元素生成平行四边形背景，字体保持不动（适用于各种只变形背景，不影响内容的情况）。

div {
  position: relative;
}

div::before {
  background: salmon;
  content: '';
  position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;

    // 设置负的 z-index，否则会遮住文字
    z-index: -1;

  transform: skew(-25deg);
}

菱形图片

解决方案：旋转父容器。

div {
  overflow: hidden;
  transform: rotate(45deg);
}

div > img {
  height: 100%;
  width: 100%;

  // 由于旋转后的图片宽度变成了对角线，需缩放根号 2 倍
  transform: rotate(-45deg) scale(1.414);;
}

切除一角

直角

利用边界分明的倾斜渐变，将除了边角部位之外的地方都铺上背景色。

div {
  background: linear-gradient(-45deg, transparent 15px, salmon 0);
}

如果需要切掉多个边角，则设置多个背景渐变，并通过background-size控制每个切角区域只占 50%。

div {
  background:
    linear-gradient(135deg,  transparent 15px, salmon 0) top left,
    linear-gradient(-135deg, transparent 15px, salmon 0) top right,
    linear-gradient(-45deg, transparent 15px, salmon 0) bottom right,
    linear-gradient(45deg, transparent 15px, salmon 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

圆角

方法同上，改为径向渐变即可。

div {
  background:
    radial-gradient(circle at top left, transparent 15px, salmon 0)
      top left,
    radial-gradient(circle at top right, transparent 15px, salmon 0)
      top right,
    radial-gradient(circle at bottom right, transparent 15px, salmon 0)
      bottom right,
    radial-gradient(circle at bottom left, transparent 15px, salmon 0)
      bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

梯形 Tab

用上述提到的生成伪元素背景方法，加以 3d 变形。

div {
  display: inline-block;
  position: relative;
  padding: 0.5em 1em;
}

div::before {
  background: salmon;
  content: '';
  position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;

  // perspective 开启 3d 模式
  // scaleY 是为了调节近大远小
  transform: scaleY(1.2) perspective(0.5em) rotateX(2deg);

  // 保证 tab 视觉上不位移
  transform-origin: bottom;
}

注：把transform-origin改为bottom right或bottom left可以生成直角梯形。

饼图

示例代码

善用transform。

单位turn表示一圈。

.pie {
  border-radius: 50%;
  height: 100px;
  width: 100px;

  // 先做成两种颜色对半开的效果
  background: salmon;
  background-image: linear-gradient(to right, transparent 50%, mistyRose 0);
}

// 生成一个用于遮罩的半圆
.pie::before {
  border-radius: 0 100% 100% 0 / 50%;
  content: '';
  display: block;
  height: 100%;
  margin-left: 50%;
  transform-origin: left;
}

// 根据不同的百分比，用不同颜色的半圆，进行旋转后遮挡
.pie.p0::before {
  background-color: inherit;
  transform: rotate(0);
}

.pie.p10::before {
  background-color: inherit;
  transform: rotate(0.1turn);
}

.pie.p60::before {
  background-color: mistyRose;
  transform: rotate(0.1turn);
}

.pie.p100::before {
  background-color: mistyRose;
  transform: rotate(0.5turn);
}