Creating custom shape using CSS

Question

Can anybody tell me is it possible to make a shape (like attached image) only using CSS.

This is shape -

enter image description here

I tried to archive this using css border-radius then it was close. But bottom of the shape it's wide is need to increase little. (see the image)

This is my code so far -

HTML :

<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="" >content</a></li>
  <li><a href="#">content</a></li>
  <li><a href="#">content</a></li>
  <li><a href="#">content</a></li>
</ul>

CSS :

.content .nav-tabs {
  background: #dd5b5b;
  padding: 15px 0 5px 0;
  overflow: hidden;
}

.content .nav-tabs > li {
  float: left;
  list-style: none;
}

.content .nav-tabs > li > a {
  padding: 5px 40px 10px;
  background: #eaedf2;
  border: 1px solid #a48686;
  border-bottom: none;
  border-top-right-radius: 2em;
  border-top-left-radius: 1.5em;
  text-decoration: none;
  color: gray;
}

JS BIN

It would be highly appreciated if someone can tell my how I figure this out.

Tushar · Accepted Answer · 2018-05-23 10:15:12Z

You can try below code.

.content .nav-tabs {
  background: #dd5b5b;
  padding: 15px 0 0 0;
  overflow: hidden;
}

.content .nav-tabs>li {
  float: left;
  list-style: none;
  margin-left: 12px;
}

.content .nav-tabs>li>a {
  padding: 5px 40px 10px;
  background: #eaedf2;
  border: 1px solid #a48686;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  text-decoration: none;
  color: gray;
  display: block;
  position: relative;
}

.content .nav-tabs>li>a:after {
  content: " ";
  position: absolute;
  right: -8px;
  top: -2px;
  height: 40px;
  width: 10px;
  background: #eaedf2;
  border-radius: 0 20px 0 0;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  transform: rotate(-10deg);
  border: 1px solid #a48686;
  border-left: none;
  z-index: 1;
}

.content .nav-tabs>li>a:before {
  content: " ";
  position: absolute;
  left: -8px;
  top: -2px;
  height: 40px;
  width: 10px;
  background: #eaedf2;
  border-radius: 20px 0 0 0;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  transform: rotate(10deg);
  border: 1px solid #a48686;
  border-right: none;
}

.content .nav-tabs>li>a:hover {
  z-index: 1
}

<div class="content">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#home" role="tab" data-toggle="tab">content</a></li>
    <li class="active"><a href="#home" role="tab" data-toggle="tab">content2</a></li>
    <li class="active"><a href="#home" role="tab" data-toggle="tab">content2</a></li>
    <li class="active"><a href="#home" role="tab" data-toggle="tab">content2</a></li>
  </ul>



</div>
<!-- /.content -->

Its great.. But one thing, Can we change the order of list items. That mean you have done it from right to left. Can we change it to left to right?

Harry · Accepted Answer · 2014-07-08 05:56:23Z

You can do it like shown in this demo.

HTML: (Updated based on your mark-up)

<div class='content'>
    <ul class="nav nav-tabs" role="tablist">
        <li class="active tabHdr"><a href="">content</a></li>
        <li class='tabHdr'><a href="#">content</a></li>
        <li class='tabHdr'><a href="#">content</a></li>
        <li class='tabHdr'><a href="#">content</a></li>
    </ul>
</div>

CSS: (requires CSS3)

.content .nav-tabs {
    position: relative;
    z-index: 1;
    background: #dd5b5b;  
    overflow: hidden;
}
.content .nav-tabs > li {
    display: inline-block;
    list-style: none;
    top: 9px;
}
.tabHdr {
    position: relative;
    padding: 2% 2.5%;
    margin: 0% -1%;
}
.tabHdr::before {
    content:'';
    position: absolute;
    top: -4px;
    right: 0px;
    bottom: 0.25em;
    left: 0px;
    z-index: -1;
    -webkit-transform: perspective(25px) rotateX(10deg);
    -moz-transform: perspective(25px) rotateX(10deg);
    -ms-transform: perspective(25px) rotateX(10deg);
    -o-transform: perspective(25px) rotateX(10deg);
    transform: perspective(25px) rotateX(10deg);
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    background-color: #eaedf2;
    border-width: 2px 2px 0px 2px;
    border-color: #a48686;
    border-style: solid;
    border-radius: 8px;
    color: gray;
}
.active{
    z-index: 2;
}

Update: Full Demo

Arnelle Balane · Accepted Answer · 2014-07-08 05:02:40Z

1

I got the tab's shape using CSS border-radius and pseudo-elements:

.content .nav-tabs > li > a {
  padding: 5px 40px 10px;
  background: #eaedf2;
  text-decoration: none;
  color: gray;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  margin-left: 15px;
  position: relative;
}

.content .nav-tabs > li > a:before,
.content .nav-tabs > li > a:after {
  content: "";
  position: absolute;
  bottom: 0;
  border-bottom: 1.5em solid #eaedf2;
}

.content .nav-tabs > li > a:before {
  left: -7px;
  border-left: 8px solid transparent;
}

.content .nav-tabs > li > a:after {
  right: -7px;
  border-right: 8px solid transparent;
}

answered Jul 8, 2014 at 5:02

Arnelle Balane

5,4951 gold badge28 silver badges32 bronze badges

2 Comments

TNK Over a year ago

Is it possible to add a border around tab?

Arnelle Balane Over a year ago

@TNK yes but the border will not be applied to the pseuso-elements, so the slanting-sides of the tabs will still not have a border.

moomin · Accepted Answer · 2014-07-08 04:46:09Z

0

Not 100% sure what you mean by "the bottom is too wide", but have you tried to use margins?

margin-left: 5px; This seems to be closer to your picture, though still a bit too rounded.

answered Jul 8, 2014 at 4:46

moomin

593 bronze badges

Comments

user764357 · Accepted Answer · 2014-07-08 04:49:29Z

0

border-radius can take 1 or 2 values, with one value it has a circular radius , with two you can define a elliptical radius.

So you just need to change your radius definitions, like so:

border-top-right-radius: 1em 3em;
border-top-left-radius: 1em 3em;

Heres what it looks like, but you can preview it on jsFiddle. Now you just need to figure out what radii will work best for your design.

enter image description here

answered Jul 8, 2014 at 4:49

user764357

Comments

TribalChief · Accepted Answer · 2014-07-08 05:02:39Z

Here's something to get you started:

.content .nav-tabs > li:after {
  content: "";
  display: inline-block;
  width: 0; 
  height: 0; 
  border-left: 3px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 30px solid #eaedf2;
  -ms-transform: rotate(-5deg); /* IE 9 */
  -webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
  transform: rotate(-5deg);
  margin-left: -15px;
  margin-bottom: -15px;
}

.content .nav-tabs > li:before {
  content: "";
  display: inline-block;
  width: 0; 
  height: 0; 
  border-right: 3px solid transparent;
  border-left: 18px solid transparent;
  border-bottom: 30px solid #eaedf2;
  -ms-transform: rotate(5deg); /* IE 9 */
  -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
  transform: rotate(5deg);
  margin-right: -10px;
  margin-bottom: -15px;
}

Just mess around with the values to get the incline you need!

siabaJS · Accepted Answer · 2014-07-08 05:34:16Z

http://jsfiddle.net/q29X5/1/

Here's a fiddle, it took me a while and the code is a bit messy but you'll figure it out.

CSS:

.tabBar {
    background:-webkit-linear-gradient(top, #f55, #d33);
    height:50px;
}
.tabOut {
    display:block-inline;
    float:left;
    position:relative;
    left:10px;
    width:100px;
    /*transform perspective*/
    -webkit-perspective:150px;
    perspective:150px;
    -webkit-perspective-origin:50% 50%;
    perspective-origin:50% 50%;
}
.tabIn {
    background:-webkit-linear-gradient(top, #efefef, #dcdcdc);
    border-radius:10px 10px 0 0;
    width:100px;
    height:50px;
    border:2px solid black;
    border-color:#333 #333 transparent #333;
    /*transforms*/
    -webkit-transform:rotateX(45deg)translate(0px, 2px);
    -webkit-perspective:150px;
    perspective:150px;
    -webkit-perspective-origin:50% 50%;
    perspective-origin:50% 50%;
}
.tabIn .tabText {
    font-size:40px;
    width:100%;
    height:100%;
    display:block;
    text-align:center;
    /*Transform*/
    -webkit-transform:rotateX(-30deg)scale(0.5, 0.8);
}

HTML:

<div class="tabBar">
        <div class="tabOut">
            <div class="tabIn"> <span class="tabText">Tab1</span>

            </div>
        </div>
        <div class="tabOut">
            <div class="tabIn"> <span class="tabText">Tab2</span>

            </div>
        </div>
        <div class="tabOut">
            <div class="tabIn"> <span class="tabText">Tab3</span>

            </div>
        </div>
    </div>

1(one)Tab:

        <div class="tabOut">
            <div class="tabIn"> <span class="tabText">I'm a tab</span>

            </div>
        </div>
        <div class="tabOut">

Collectives™ on Stack Overflow

Creating custom shape using CSS

7 Answers 7

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related