Pure CSS Angled/Rounded Tab

Question

I've included an image because I couldn't quite describe it in words. But basically I'm looking to achieve this shape of a "tab" in the best way possible.

I know there's been questions about this before, using some new css3 tricks to rotate pieces into place, but I've never quite seen anything quite like this. Behind where there is currently the greenish-blue colour, there will be an image most likely. The red lines represent content on the page.

I've accomplished this in the past using a .png file with that little curved bit in it, but I hate doing that.

enter image description here

Also I've seen this:

How to make angled tab like this using css?

But it's not quite what I'm looking for, but if there's a similar solution, I'm open to that. I also need a way for the div to carry on to the far right edge of the screen, while still keeping the left part of the tab fixed in place.

SOLUTION FROM @chipChocolate.py

I used the solution from chip but I swapped it so that the tab was the svg element:

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

Swapped the colour so that you could see it on here.

The best I can think of is to use the pseudo-elements `:before` and `:after`. You `skew()` then and use a `border-radius` to match the image. — Ismael Miguel, Jan 15 '15 at 18:24
IMHO, instead of hacking CSS3, you might use html5 canvas or SVG to draw exactly what you need. — markE, Jan 15 '15 at 18:42
I would say that the tag "svg" applies better to this question and should be added to make the question better findable for future users. Probably at the expense of either html or html5 tag. — Harry, Jan 16 '15 at 13:10

Weafs.py · Accepted Answer · 2015-01-15T20:06:08.550

6

"I'm looking to achieve this shape of a "tab" in the best way possible" - Use 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>

edited Jan 15 '15 at 20:06

answered Jan 15 '15 at 18:40

Weafs.py

22,731
9
56
78

2

I endorse your use of SVG (or canvas), but the Bezier curve in your demo deforms when the width varies. I think the questioner wanted a fixed curve instead. ;-) – markE Jan 15 '15 at 18:44
1

@markE - In that case the OP simply needs to remove the `perserveAspectRatio="none"`. – Weafs.py Jan 15 '15 at 18:44
1

I haven't yet dove into SVG's, so thank you for this, I'll definitely be using these more often – nickbwatson Jan 15 '15 at 18:54
How are those values generated? – Waxi Jan 15 '15 at 21:38
1

@slime - I always write the `path` commands without any software. :) – Weafs.py Jan 15 '15 at 21:38

jbutler483 · Answer 2 · 2015-01-16T11:12:10.637

I first attempted using a gradient trick, although I didn't have the ability to go further without adding in another element:

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

However, if you were going to include a 'block color' background, this would work (without loosing its shape):

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

Pure CSS Angled/Rounded Tab

2 Answers2