纯 CSS Angled/Rounded 标签

Question

我附上了一张图片，因为我无法用文字描述它。但基本上我希望以尽可能最好的方式实现这种 "tab" 的形状。

我知道之前有人对此有疑问，使用一些新的 css3 技巧将棋子旋转到位，但我从来没有见过这样的事情。在当前greenish-blue颜色的后面，很可能会有图像。红线代表页面内容。

我过去曾使用一个带有小弯曲位的 .png 文件来完成此操作，但我讨厌这样做。

我也看到了这个：

How to make angled tab like this using css?

但这不是我想要的，但如果有类似的解决方案，我愿意接受。我还需要一种方法让 div 继续到屏幕的最右边缘，同时仍将选项卡的左侧部分固定到位。

来自@chipChocolate.py

的解决方案

我使用了 chip 的解决方案，但我交换了它，使选项卡成为 svg 元素：

<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>

调换了颜色以便您可以在此处看到它。

Answer 1

"I'm looking to achieve this shape of a "选项卡”以最佳方式可能” - 使用svg.

<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>

Answer 2

我首先尝试使用渐变技巧，尽管我无法在不添加其他元素的情况下走得更远：

.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 */

  }

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

但是，如果你要包括一个 'block color' 背景，这会起作用（不会失去它的形状）：

.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;
      }

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

纯 CSS Angled/Rounded 标签

Pure CSS Angled/Rounded Tab

html

css

svg

css-shapes