How to to make base shape with CSS?

Question

I'm trying to make base shape with css since I need to add it to homepage of the website. The final version is attached below with the image. Please help me out, I'm not really sure how to achieve this

 #base { background: #0a863d; display: inline-block; height: 55px; margin-left: 20px; margin-top: 55px; position: relative; width: 100px; } #base:before { border-bottom: 35px solid #0a863d; border-left: 50px solid transparent; border-right: 50px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -35px; width: 0; } 

 <div id="base"></div> 

Answer 1

Change borders for :after element:

 #base { background: #0a863d; display: inline-block; height: 60px; margin-left: 20px; margin-top: 55px; position: relative; width: 100px; } #base:before { border-left: 30px solid #0a863d; border-top: 30px solid transparent; border-bottom: 30px solid transparent; content: ""; height: 0; position: absolute; width: 0; right: -30px; } 

 <div id="base"></div> 

Answer 2

 #base { background: #0a863d; display: inline-block; height: 55px; margin-left: 20px; margin-top: 55px; position: relative; width: 100px; } #base:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 27.5px 0 27.5px 25px; border-color: transparent transparent transparent #0a863d; position: absolute; right: -25px; } 

 <div id="base"></div> 

Answer 3

 #base { background: #0a863d; display: inline-block; height: 50px; margin-left: 20px; margin-top: 55px; position: relative; width: 100px; } #base:before { border-bottom: 25px solid transparent; border-left: 50px solid #0a863d; border-top: 25px solid transparent; content: ""; height: 0; position: absolute; left:100%; width: 0; } 

 <div id="base"></div> 

Answer 4

Make use of the ::before pseudo element.

 #base { background: #0a863d; display: inline-block; height: 55px; margin-left: 20px; margin-top: 55px; position: relative; width: 100px; } #base:before { border-bottom: 27px solid transparent; border-left: 30px solid #0a863d; border-right: 30px solid transparent; border-top: 28px solid transparent; content: ""; height: 0; right: -60px; position: absolute; top: 0px; bottom: 0; width: 0; margin: auto; } 

 <div id="base"></div> 

Answer 5

You can rotate the arrow by changing the margin and border properties: they have to be "rotated" to the right ( left becomes top , top becomes right , and so on):

 #base { background: #0a863d; display: inline-block; height: 66px; margin-top: 20px; margin-right: 55px; position: relative; width: 500px; } #base:before { border-left: 35px solid #0a863d; border-top: 33px solid transparent; border-bottom: 33px solid transparent; content: ""; height: 0; top: 0; position: absolute; right: -35px; width: 0; } 

 <div id="base"></div> 

The height of the arrow can be changed by adjusting the height of the #base and the border-top and border-bottom of #base:before . (Note that the sum of border-top and border-bottom should be the same as the height .)
The width of the arrow can be changed by adjusting the width of the #base