How to do the below mentioned shape in css - html

Question

I need a weird shaped div and I've read around the web for shaping divs but I haven't found what I need :
Please note: It can't be just a border, as there is supposed to be text inside it.

Answer 1

You can use skewX() and a pseudo element to make a your shape responsive :
DEMO
HTML :
<div>TEST</div>
CSS :
div{
line-height:50px;
color:#fff;
text-align:center;
background:#344769;
width:20%;
position:relative;
}
div:after{
content:'';
position:absolute;
width:100%;
height:100%;
left:0;
background:#344769;
z-index:-1;
-ms-transform-origin: 0 100%;
-webkit-transform-origin:0 100%;
transform-origin: 0 100% ;
-ms-transform: skewX(-30deg);
-webkit-transform: skewX(-30deg);
transform: skewX(-30deg) ;
}

Answer 2

If you want to have a really custom shape, you may have a better try with SVG shapes. It allows you to draw polygons, and is used, for example, to display maps on some websites.
As for the illustration you added after editing your answer, you may want to play simply with triangles by separating your shape into the rectangle with text and a triangle on the right.
Example (see also on JsFiddle):
HTML:
<div class="shape">
<span class="text">Test</span>
<span class="triangle"></span>
</div>
CSS:
.shape {
height: 40px;
line-height: 40px;
overflow: hidden;
}
.text {
background: navy;
color: white;
float: left;
padding-left: 20px;
text-align: center;
width: 150px;
}
.triangle {
float: left;
height: 0;
width: 0;
margin-top: -40px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid navy;
}

Answer 3

you can achieve this effect by using linear-gradient.
Have a look at the DEMO First.
div{
width: 200px;
height: 50px;
line-height: 50px;
font-size: 2em;
color:#ffffff;
background: linear-gradient(-250deg, #333 0%, #333 90%, transparent 90%, transparent 100%);
text-align:center;
}

Answer 4

You can use the :after pseudo-element in css to achieve this.
I've created a jsFiddle to demonstrate this: http://jsfiddle.net/49BRA/
CSS:
div {
display: block;
width: 200px;
height: 50px;
background-color: #CCC;
margin: 0;
padding: 0;
line-height: 1em;
position: relative;
font-size: 2em;
line-height: 50px;
text-align: center;
}
div:after {
display: inline-block;
content: "";
height: 0;
width: 0;
border: 25px solid #CCC;
border-bottom: 25px solid transparent;
border-right: 25px solid transparent;
position: absolute;
right: -50px;
}
HTML:
<div>TEST</div>
I hope this works for you.
Cheers!

Answer 5

Please use this code for getting the shape you want:
<span style="display: inline-block; width: 20em; height: 20em">
<span style="position: relative; display: inline-block; width: 20em; height: 20em">
<i style="position: absolute;display:inline-block;width:14.6em;height:5.4em;background-color:#007BFF;left:0em;top:0em"></i>
<i style="position: absolute;display:inline-block;width:0;height:0;line-height:0;border:2.7em solid transparent;border-left:2.7em solid #007BFF;border-top:2.7em solid #007BFF;left:14.6em;top:0em"></i>
</span>
</span>