CODEWITHSUNDEEP
htmlcsssvgcss-shapes
nickbwatson
nickbwatson

Reputation: 162

Pure CSS Angled/Rounded Tab

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.

Upvotes: 3

Views: 1327

Answers (2)

jbutler483
jbutler483

Reputation: 24559

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>

Upvotes: 1

Weafs.py
Weafs.py

Reputation: 23002

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

Upvotes: 6

Related Questions