纯CSS Angled / Rounded标签

Question

我已经包含了一张图片，因为我无法用文字描述它。但基本上我正在寻求实现这种形状的标签＆＃34;以最好的方式。

我知道之前有过这方面的问题，使用一些新的css3技巧将部件旋转到位，但我从来没有见过这样的东西。在目前呈现蓝绿色的背后，最有可能出现图像。红线代表页面上的内容。

我过去使用.png文件中的那个小弯曲位完成了这个，但我讨厌这样做。

我也见过这个：

How to make angled tab like this using css?

但这并不是我想要的，但如果有类似的解决方案，我会对此持开放态度。 我还需要一种方法让div继续到屏幕的最右边缘，同时仍然保持标签的左侧部分固定到位。

解决方案来自@ chipChocolate.py

我使用了芯片的解决方案，但我交换了它，以便标签是svg元素：

＆＃13;

＆＃13;

<svg viewBox="0 0 960 70" preserveAspectRatio="none">
    <path fill="#008882" d="M0,61c0,0,141,0,215.5,0C294,61,358,0.3,423.5,0.3c35,0,536.5,0,536.5,0v69.5H0V61z"/>
</svg>

＆＃13;

＆＃13;

＆＃13;

交换颜色，以便你可以在这里看到它。

Answer 1

＆＃34;我希望达到这种形式的＆＃34;标签＆＃34;以最佳方式可能＆＃34; - 使用svg。

＆＃13;

＆＃13;

<svg width="100%" height="84" viewBox="0 0 700 84" preserveAspectRatio="none">
  <path d="M0,0 h700 v30 h-280 c-60,0 -60,15 -100,30 c-10,4 -15,5 -35,6 h-285" fill="#008882" />
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我首先尝试使用渐变技巧，虽然我没有能力在没有添加其他元素的情况下更进一步：

＆＃13;

＆＃13;

.top{
  height:100px;
  width:100%;
  background:lightblue;
  position:relative;
  }
.top:after{
  content:"";
  position:absolute;
  width:50%;
  height:20px;
  background:lightblue;
  bottom:-20px;
  border-radius: 0 0 50% 0;
  }

.top:before{
  content:"";
  position:absolute;
  background:red;
  height:20px;
  width:20px;
  left:50%;
  bottom:-20px;
  
  
  background: -moz-radial-gradient(center, ellipse cover,  rgba(125,185,232,0.01) 49%, rgba(125,185,232,1) 50%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(49%,rgba(125,185,232,0.01)), color-stop(50%,rgba(125,185,232,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(125,185,232,0.01) 49%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(125,185,232,0.01) 49%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(125,185,232,0.01) 49%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(125,185,232,0.01) 49%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#037db9e8', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  }

＆＃13;

<div class="top"></div>

＆＃13;

＆＃13;

＆＃13;

然而，如果你要包含一个＆＃39;块颜色＆＃39;背景，这将工作（不失其形状）：

＆＃13;

＆＃13;

.top{
      height:100px;
      width:100%;
      background:#008882;
      position:relative;
      }
    .top:after{
      content:"";
      position:absolute;
      width:50%;
      height:20px;
      background:#008882;
      bottom:-15px;
      border-radius: 0 0 50px 0;
      }

    .top:before{
      content:"";
      position:absolute;
      background:white;
      height:20px;
      width:50%;
      left:50%;
      bottom:-5px;      
      border-radius: 50px 0 0 0;
      }

＆＃13;

<div class="top"></div>

＆＃13;

＆＃13;

＆＃13;