How to get adaptive diagonal inside a div? - CSS

Question

I am trying to achieve this;

There is an inner div and an outer div. The inner div is rotated 45 degrees. But I want the inner div to convert according to the outer div. That is, I can provide fixed attributes only for the outer div, and the inner should form ^ according to the outer div. How can i do this?

here is 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 a violin.

Answer 1

This is a difficult 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

Hope this works for you. Good luck