C

CSS形状

2025-05-26

CSS形状

本文包含在 CSS 上设置不同形状样式的示例。

Border-Radius 属性

在设置任何 CSS 图形的样式之前，理解该border-radius属性是一个重要的概念。它允许对 HTML 元素进行圆角处理。每个角度的曲线由定义其形状的一个或两个半径决定——圆形或椭圆形。即使元素没有边框，半径也会延伸到整个背景。

该border-radius属性允许同时对 HTML 元素的所有border-radius角进行圆角处理。如果为该属性设置两个值，则第一个值将对左上角和右下角进行圆角处理，第二个值将对右上角和左下角进行圆角处理。您可以使用px、em、%或其他单位来设置值。

通过使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius和border-bottom-right-radius属性，您可以按照自己的方式将每个角弄圆。

斜线 (/) 符号分隔的值定义水平和垂直半径。

以下是一些具有不同边框半径的形状的示例。

替代文本




.shape1 { border-radius: 15px; }
.shape2 { border-top-left-radius: 15px; }
.shape3 { border-top-right-radius: 15px; }
.shape4 { border-bottom-left-radius: 15px; }
.shape5 { border-bottom-right-radius: 15px; }
.shape6 { border-radius: 0 0 15px 15px; }
.shape7 { border-radius: 15px 15px 0 0; }
.shape8 { border-radius: 0 10px 20px; }
.shape9 { border-radius: 10px 20px; }
.shape10 { border-radius: 10px/20px; }
.shape11 { border-radius: 5px 10px 15px 30px/30px 15px 10px 5px; }
.shape12 { border-radius: 10px 20px 30px 40px/30px; }

.shape {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 5px solid #32557f;
}
Enter fullscreen mode Exit fullscreen mode

有在线工具可以使用不同的边框半径进行播放：链接 1、链接 2。

圆圈

圆形是最简单的 CSS 形状。将该border-radius: 50%;属性应用于宽度和高度相同的元素，即可得到一个圆形。




.circle {
  background: #32557f;
  width: 200px;
  height: 200px;
  border-radius: 50%; 
}
Enter fullscreen mode Exit fullscreen mode

替代文本

椭圆形/椭圆形

椭圆的制作方法与圆形相同。唯一的区别是椭圆的宽度和高度不同。




.ellipse {
  background: #32557f;
  width: 200px;
  height: 100px;
  border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

半椭圆

要制作半椭圆，请使用斜线 (/) 分隔的数值组来定义水平和垂直半径。如果在斜线符号前输入 50%，则会得到垂直半椭圆。如果在斜线符号后输入 50%，则会得到水平半椭圆。0% 和 100% 值的组合定义半椭圆的方向。请参阅以下示例。




.half-ellipse1 { border-radius: 50% / 100% 100% 0 0; }
.half-ellipse2 { border-radius: 50% / 0 0 100% 100%; }
.half-ellipse3 { border-radius: 100% 0 0 100% / 50%; }
.half-ellipse4 { border-radius: 0 100% 100% 0 / 50%; }

.half-ellipse {
  background: #32557f;
  width: 150px;
  height: 75px;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

三角形

CSS 三角形可用于创建箭头，例如在选择元素或按钮内部。

要制作三角形，请创建一个宽度和高度为零的盒子。




.triangle {
  width: 0;
  height: 0;
}
Enter fullscreen mode Exit fullscreen mode

箭头的实际宽度和高度由边框的宽度决定。例如，向上的箭头底部边框为彩色，左右边框为透明，形成三角形。




.triangle .triangle-up {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #32557f;
}

.triangle .triangle-down {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #32557f;
}

.triangle .triangle-left {
  border-top: 50px solid transparent;
  border-right: 100px solid #32557f;
  border-bottom: 50px solid transparent;
}

.triangle .triangle-right {
  border-top: 50px solid transparent;
  border-left: 100px solid #32557f;
  border-bottom: 50px solid transparent;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

要制作直角三角形（直角三角形），请将顶部或底部着色，并使右侧或左侧边框保持透明。




.triangle .triangle-top-left {
  border-top: 100px solid #32557f;
  border-right: 100px solid transparent;
}

.triangle .triangle-top-right {
  border-top: 100px solid #32557f;
  border-left: 100px solid transparent;
}

.triangle .triangle-bottom-left {
  border-bottom: 100px solid #32557f;
  border-right: 100px solid transparent;
}

.triangle .triangle-bottom-right {
  border-bottom: 100px solid #32557f;
  border-left: 100px solid transparent;
}
Enter fullscreen mode Exit fullscreen mode

替代文本

箭

要创建一个没有尾巴的简单箭头，请制作一个具有宽度和高度、边框以及零左边框和上边框的框。




.arrow {
  width: 15px;
  height: 15px;
  border: 2px solid #32557f;
  border-left: 0;
  border-top: 0;
}
Enter fullscreen mode Exit fullscreen mode

要制作向上箭头，请添加transform: rotate(225deg);属性；要制作向下箭头，请添加transform: rotate(45deg);属性以将箭头分别旋转 225 度和 45 度。




.arrow-up { transform: rotate(225deg); }
.arrow-down { transform: rotate(45deg); }
Enter fullscreen mode Exit fullscreen mode

替代文本

您还可以制作带有尾巴的弯曲箭头：




.arrow-curved {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid #32557f;
  transform: rotate(10deg);

  &:after {
    content: "";
    position: absolute;
    border: 0 solid transparent;
    border-top: 3px solid #32557f;
    border-radius: 20px 0 0 0;
    top: -12px;
    left: -9px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

替代文本

下面是如何创建箭头指针的示例：




.arrow-pointer {
  width: 250px;
  height: 50px;
  background: #32557f;
  position: relative;

  &:after {
    content: '';
    position: absolute;
    left: 0; bottom: 0; width: 0; height: 0;
    border-left: 25px solid #7eb4e2;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
  }

  &:before {
    content: '';
    position: absolute;
    right: -25px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 25px solid #32557f;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
  }
}
Enter fullscreen mode Exit fullscreen mode

替代文本

您可以在sharkcoder.com上找到更多形状示例

文章来源：https://dev.to/sharkcoder/css-shapes-244j
Devto 翻译
PREV
🙈 仅用 3 行代码即可隐藏生产环境中的所有控制台日志
NEXT
如何在 Javascript 中上传之前预览图像