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

指间行走

于 2023-11-15 15:28:13 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 语言文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/ant_dreams/article/details/134421324

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;       // 线条的颜色
}