HTML中的特定形状

Question

我知道使用图像可以做到这一点，使用宽度为100％的图像（因为我在图像中显示的内容应该是该页面宽度的100％）， 但是有没有办法用html和css做类似的事情？ 图像如下。

有任何想法吗？

Answer 1

对于直接用HTML制作的形状，我建议使用类似于以下内容的SVG标签：

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>

上面的代码片段位于：https://www.w3schools.com/html/html5_svg.asp