主页 / 问题 / 1065023
Accepted
Кевин
Asked:2020-01-01 21:58:30 +0000 UTC2020-01-01 21:58:30 +0000 UTC

如何实现两种颜色的文字

  • 772

布局中出现了以下 404 按钮设计：

在此处输入图像描述

由于我没有搜索，但没有找到这个设计的实现

告诉我如何做到这一点

css

2 个回答

  1. Best Answer

    div {
  background: linear-gradient(150deg, #212121 0%, #212121 50%, #b71c1c 50.5%, #b71c1c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  font-family: sans-serif;
  font-size: 8rem;
  font-weight: bold; 
  text-align: center;
}
    <div>
  HELLO
</div>

    变体clip-path

    div {
  font-family: sans-serif;
  font-size: 8rem;
  font-weight: bold;
  color: #212121;
  position: relative;
}

div::after {
  content: "404";
  position: absolute;
  left: 0;
  clip-path: polygon(100% 15%, 0 100%, 100% 100%);
  color: #b71c1c;
}
    <div>
  404
</div>

    • 7

  2. SVG 的变体

    <svg viewBox="0 0 250 100">
  <defs>
    <style>
      .txt{
        font-size: 100px;
        font-weight: 900;
        font-family: sans-serif;
      }
    </style>
    <clipPath id="clip">
      <path d="M220,-2 220,80 0,100" fill="red" />
    </clipPath>
  </defs>
  <text class="txt" x="20" y="80" fill="#3c4852">404</text>
  <text class="txt" x="20" y="80" fill="#48689a" clip-path="url(#clip)">404</text>
</svg>

    • 7

相关问题