CODEWITHSUNDEEP
htmlcsscss-shapes
user1063287
user1063287

Reputation: 10879

How to make a CSS shape with rounded and straight edges?

Desired Behaviour

I want to make this shape in CSS - it's a tab for a menu item.

enter image description here

enter image description here [ example with text ]

The implementation scenario is an HTML template where CSS style sheets are switched to make color changes etc.

I want to use CSS to style the tab rather than background images so that I don't have to create a specific background image for each theme's version of a menu item tab.

What I've Tried

I looked around at some CSS shape sites and tried to pull them apart and adjust border widths etc, but haven't been able to get the desired result yet. Below are a few attempts. 

.my_tab:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: 0px;
  border-width: 0 105px 25px 0;
  border-style: solid;
  border-color: transparent transparent blue;
}
.my_tab {
  position: relative;
  width: 104px;
  border-width: 20px 0 0 0;
  border-style: solid;
  border-color: red transparent;
  top: 50px;
}
.my_tab_two {
  background: purple none repeat scroll 0 0;
  height: 22px;
  position: relative;
  top: 150px;
  width: 104px;
}
.my_tab_two a {
  color: white;
  display: block;
  font-family: arial;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  width: 40px !important;
}
.my_tab_three {
  background: green none repeat scroll 0 0;
  border-radius: 0 5px 0 0;
  height: 15px;
  position: relative;
  top: 113px;
  width: 104px;
}
/* -------- */

p {
  font-family: arial;
}
.para_two {
  margin-top: 105px;
  position: absolute;
}
<p>attempt 01:</p>
<div class="my_tab"></div>
<p class="para_two">attempt 02:</p>
<div class="my_tab_two"><a href="#">link</a>
</div>
<div class="my_tab_three"></div>
<div class="my_tab_four"></div>

JSFiddle

http://jsfiddle.net/rwone/evz4d3mw/

Upvotes: 1

Views: 909

Answers (1)

Akshay
Akshay

Reputation: 14378

You can create this by placing after and before pseudo-elements the after pseudo-element is skewed to make the slanted edges.

Note:This may not be the best solution i would suggest svg for this

.tab{
  width:100px;
  height:100px;
  background:darkred;
  border-top-left-radius:15px;
  color:#fff;
  position:relative;
  padding:10px;
  border-left:5px solid #000;
  border-bottom:5px solid #000;
  border-top:5px solid #000;
  cursor:pointer;
  }
.tab:after{
  position:absolute;
  content:"";
  width:30%;
  height:50%;
  background:darkred;
  right:-30%;
  transform:skewY(45deg);
  top:11%;
  border-top:7px solid #000;
  border-right:5px solid #000;
  box-sizing:border-box;
  }

.tab:before{
  position:absolute;
  content:"";
  width:30%;
  height:60%;
  right:-30%;
  background:darkred;
  bottom:-5px;
  border-bottom:5px solid #000;
  border-right:5px solid #000;
  box-sizing:border-box;
<div class="tab">Some text</div>

Svg solution 

.tab {
  width: 200px;
  height: 200px;
}
<div class="tab">
  <svg width="100%" height="100%" viewbox="0 0 100 100">
    <path d="m5 5 l 75 0 15 15 0 60 -90 0 z" fill="darkred" stroke="#000" stroke-width="5"/>
  </svg>

Upvotes: 3

Related Questions