文字豎排方法

文字從上到下

  writing-mode: tb-rl;

文字從左到右

  writing-mode: rl-tb;

letter-spacing：控制字母間的間距，對中文而言就是字與字之間的間距
letter-spacing替換為word-spacing：實現英文的詞與詞之間的間距的控制

  letter-spacing: 10px;

實現效果

html

<div class="item-card-title flex-center">上門總數<span>100</span>個</div>

css樣式

.item-
 
card-title {
  height: 100%;
  width: 50px;
  background-color: #3fb723;
  font-size: 15px;
  color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px 0 0 4px;
  transition: 0.3s;
  writing-mode: tb-rl;
  letter-spacing: 10px;

  span {
    writing-mode: lr-tb;
    letter-spacing: 0;
    margin-
 
bottom: 10px;
  }
}

箭頭

  &::after {
    content: '';
    position: absolute;
    top: -6px;
    right: 31px;
    height: 12px;
    width: 12px;
    background: linear-gradient(135deg, #3fb723 0%, #3fb723 50%, transparent 50%, transparent 100%);
    transform: rotate(135deg);
  }

實現效果