How to get adaptive diagonal inside div? - CSS

Question

I am trying to achieve this;

There is an inner div and outer div. Inner div is rotated 45deg. But I want inner div to transform according to outer div. That is, I can give fixed attributes to outer div only, and inner has to form a ^ according to outer div. How can I do this?

here is the html and css;

<div class="diva"><div class="divb"></div></div>

.diva{
    height: 200px;
    width: 300px;
    background: #CCC;
}
.divb {
    position: relative; 
    padding: 100px 0 0;
    height: 100%;
    width: 100%;
}
.divb:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-left: solid 4px green;
    border-top: solid 4px green;
    border-bottom: solid 4px transparent;
    border-right: solid 4px transparent;
    transform: rotate(45deg);
}

here is the fiddle.

Answer 1

This is a tricky problem, but it is possible. Here is my code:

HMTL:

<div id="a"></div>

CSS:

#a {
    position: relative;
    background: #ffffff;
    position:absolute;
    top:50px;
    left:50px;
}
#a:after, #a:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
#a:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 30px;
    margin-left: -30px;
}
#a:before {
    border-color: rgba(0, 255, 0, 0);
    border-bottom-color: #00ff00;
    border-width: 36px;
    margin-left: -36px;
}

FIDDLE

I hope this works for you. Good luck!