How to style the div to triangle using CSS?

Question

I want to make a triangle out of rectangular division using CSS. Any help would be much appreciated.

Answer 1

Not sure if I understand the question, but if u need to create that little triangle there you should be using borders.

You can find more on that here

http://css-tricks.com/examples/ShapesOfCSS/

your div should have the normal proprieties of (background color, paddings, etc. and a position relative) and then define:

div:after{
content:"";
position:absolute;
left: -100px /* the width of your triangle */
top:0;
height: 0;
 border-top: 50px solid transparent; /* half the height of your div */
border-left: 100px solid red; /* width of the triangle  + the color of your background*/
border-bottom: 50px solid transparent; /* half the height of your div */
width: 0; 
}

hope i didn't forget anything

Answer 2

http://codepen.io/dcdev/full/Ffayz/

Just adjust border-left of triangle to change the size of the right side triangle.

.container{display:block;width:500px;height:300px;background:#f9f9f9;}
.rectangle{height:55px;width:250px;background:#ccc;display:table;line-height:50px;text-indent:50px;}
.green{background-color:#6ed2ac;}
.tip{float:left;color:#fff;}
.check{content:'';border:2px solid rgba(255,255,255,0.85);position:absolute;width:14px;margin:17px 0 0 17px;text-indent:0px;color:#fff;line-height:14px;height:14px;}
#triangle{float:left;width:0px;height:5px;border-top:25px solid transparent;border-left:10px solid #6ed2ac;border-bottom:25px solid transparent;}

<div class="container">
    <div class="rectangle">Discover Coaches</div>
    <div class="rectangle green tip">
        <div class="check">✔</div>
            Book a free session
        </div>
        <div id="triangle"></div>
    </div>
    <div class="rectangle">Live video session</div>
</div>

Answer 3

http://codepen.io/suez/pen/xdnCe

Inside pen you will find additional styles for on-hover color change with transitions.

div {
  position: relative;
  width: 13em;
  height: 4em;
  background: lightBlue;
}
div:after {
  content: "";
  position: absolute;
  top: 0;
  right: -1em;
  width: 0;
  height: 0;
  border-bottom: 2em solid transparent;
  border-top: 2em solid transparent;
  border-left: 1em solid lightBlue;
}

Answer 4

Since all examples gave you a 90 degree angle triangle, though I might include this. Use this to get a less sharp angle on your triangle:

CSS

.triangle::after{
    content: "";
    position:absolute;
    right:-10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 0 30px 10px;
    border-color: transparent transparent transparent #6ed2ad;
}

.triangle{
    position:relative;
    background:#6ed2ad;
    height:60px;
    line-height:60px;
    color:#fff;
    padding:0 30px;
    display:inline-block;
}

Working example