Question

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

[1]：

Answer 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;指定沿z轴显示HTML元素的顺序。

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

如何使渐变形状外CSS div框

1 个答案: