css绘制图形—三角形、对号

原创于 2023-11-15 15:28:13 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

CSS 语言专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用CSS创建三角形符号，包括宽度、高度设置，以及使用线性渐变和旋转来实现不同效果。还展示了如何通过CSS调整对号图标的位置和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三角形

.triangle(@width: 40px, @height: 40px, @deg: 45deg, @color: @primary-color){
  width: 40px;   // 三角形边宽
  height: 40px;  // 三角形边宽 等边三角形width与height相等
  background: linear-gradient(45deg, transparent, transparent 50%, #000000 50%, #000000, 100%);   // 旋转角度，顺时针(45deg,135deg,225deg),颜色
}

对号✓

.right-icon {
  display: inline-block;
  margin: 0 9px;   // 通过间距调整位置
  width: 7px;      // 第一笔画长度
  height: 14px;    // 第二笔画长度
  transform: rotate(45deg);    // 旋转角度，顺时针
  border-width: 0 2px 2px 0;   // 线条的粗细
  border-style: solid;
  border-color: #000000;       // 线条的颜色
}