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

Question

Desired Behaviour
I want to make this shape in CSS - it's a tab for a menu item.
[ 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">link
</div>
<div class="my_tab_three"></div>
<div class="my_tab_four"></div>
JSFiddle
http://jsfiddle.net/rwone/evz4d3mw/

Answer 1

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>