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

本文介绍了如何使用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;       // 线条的颜色
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值