当前位置：首页 > CSS

用css制作 < 符号

2026-03-12 13:57:28CSS

使用 CSS 制作 `<` 符号

方法一：使用伪元素和边框

通过 CSS 的伪元素和边框属性可以创建一个 < 符号。以下是一个简单的实现方式：

<div class="less-than"></div>

.less-than {
  position: relative;
  width: 20px;
  height: 20px;
}

.less-than::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black;
  transform: rotate(-45deg);
  transform-origin: left center;
}

.less-than::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black;
  transform: rotate(45deg);
  transform-origin: left center;
}

方法二：使用 Unicode 字符

可以直接使用 Unicode 字符 <（<）或 <（U+003C），并通过 CSS 调整样式：

<div class="less-than">&lt;</div>

.less-than {
  font-size: 24px;
  color: black;
  font-weight: bold;
}

方法三：使用 SVG

通过 SVG 可以更精确地绘制 < 符号：

<svg width="20" height="20" viewBox="0 0 20 20">
  <path d="M15 5 L5 10 L15 15" stroke="black" stroke-width="2" fill="none" />
</svg>

方法四：使用 CSS 旋转矩形

通过旋转两个矩形可以模拟 < 符号的形状：

用css制作 < 符号

<div class="less-than">
  <div class="line line1"></div>
  <div class="line line2"></div>
</div>

.less-than {
  position: relative;
  width: 20px;
  height: 20px;
}

.line {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: black;
}

.line1 {
  transform: rotate(-45deg);
  top: 8px;
}

.line2 {
  transform: rotate(45deg);
  top: 8px;
}

以上方法可以根据具体需求选择使用。伪元素和边框的方法适合纯 CSS 实现，而 Unicode 字符和 SVG 方法更简单直接。