如何在 CSS div Box 之外制作渐变形状答案

【问题标题】：How to make gradient shape-outside CSS div Box如何在 CSS div Box 之外制作渐变形状
【发布时间】：2019-02-01 20:53:34
【问题描述】：

如何创建这种类型的 CSS div 框[![在此处输入图像描述][1]][1]

[1]：

【问题讨论】：

请附上您迄今为止尝试过的内容。

标签： html css sass

【解决方案1】：

这是我想出的：

<!DOCTYPE html>
<html>
  <head>
    <title>Gradient Div</title>
  </head>

  <style>
    div.Outer
    {
      width: 200px;
      border: 2px solid #00df82;
      border-radius: 5px;

      font-weight: bold;
      padding-left: 15px;
      font-family: sans-serif;
    }

    div.Inner
    {
      position: absolute;
      z-index: 1;

      left: 155px;
      top: 8px;
      width: 70px;
      height: 54px;

      border-radius: 25px 5px 5px 25px;
      background-image: linear-gradient(#00df82, #34ef52);
    }

    #para
    {
      text-align: center;
      font-family: sans-serif;
      color: white;
    }
  </style>

  <body>
    <div class="Outer">
      <p>Full Filled</p>
      <div class="Inner">
        <p id="para">95</p>
      </div>
    </div>
  </body>
</html>

我已经根据我的 CSS 知识回答了这个问题。可能有更好的方法来解决这个问题。以下是各部分的解释：

position: absolute; 允许将 HTML 元素放置在 HTML 页面上的任何位置。
z-index: 1; 指定 HTML 元素沿 z 轴显示的顺序。

例如，如果一个 HTML 元素的 z-index 为 0，而另一个 HTML 元素的 z-index 为 1，则 z-index 为 1 的 HTML 元素将被绘制在z-index 为 0 的 HTML 元素。

【讨论】：