How to style a div to be like a rocket? - html

Question

I want to style an html div to be like a rocket, I mean it should represented as an oblong with a triangle edge. Just like this screenshot:-

Answer 1

A pure CSS solution could make use of the :after pseudoselector and abusing borders to make triangles. This site will even generate the code for you:
http://cssarrowplease.com/
Set the position to right and the size to be the height of the div.

Answer 2

Here's a tutorial that explains how to create a few variations of breadcrumb navigation in pure CSS3.
The final result looks like this:
Here's a working demo.

Answer 3

You actually can do triangles with pure CSS: http://css-tricks.com/snippets/css/css-triangle/

Answer 4

http://jsfiddle.net/C9PJ2/
Here is what you can sort of do using css, kind fo a hack of an arrow.
.arrow_box {
position: relative;
background: #2ad517;
border: 4px solid #12f50a;
top: 100px;
width: 240px;
height: 180px
}
.arrow_box:after, .arrow_box:before {
left: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(42, 213, 23, 0);
border-left-color: #2ad517;
border-width: 90px;
top: 50%;
margin-top: -90px;
}
.arrow_box:before {
border-color: rgba(18, 245, 10, 0);
border-left-color: #12f50a;
border-width: 96px;
top: 50%;
margin-top: -96px;
}​

Answer 5

http://jsfiddle.net/9E9uP/
something for you to start with

Answer 6

Hope this helps:
http://jsfiddle.net/A2KzR/
HTML:
<div id="global">
<div id="normal" >Content</div>
<div id="triangle-right" />
</div>
CSS:
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
left: 50px;
position: relative;
}
#normal {
width: 50px;
height: 100px;
background-color: red;
float:left;
}
#global {
width: 800px;
}
more info
http://css-tricks.com/examples/ShapesOfCSS/