Convert a HTML page into a mountain
HTML + CSS + JavaScript, 39 + 141 + 20 = 200 bytes
Outputs visually to the webpage. To allow this to work with special elements like <body>, all letters in the input are replaced.
p.innerHTML=prompt().replace(/\w/g,'a')#p,#p *{display:flex;padding:0 0 1rem;align-items:flex-end;font-size:0}#p :before,#p :after{content:'/';font-size:1rem}#p :after{content:'\\'<pre id=p>HTML + CSS + JavaScript, 10 + 103 + 20 = 133 bytes
Solution that works if there is no content within tags.
p.innerHTML=prompt()#p,#p *{display:flex;padding:0 0 1em;align-items:flex-end}#p :before{content:'/'}#p :after{content:'\\'<pre id=p>Javascript + JQuery, 275 246 bytes
Saved 29 bytes thanks to Rick Hitchcock
j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i=0;V=a.children[i];i++){s=s+j(V,b+1)}return s+c+'\\\n';};f=s=>{s=j($(s)[0],0).split`
`;w=Math.max.apply(0,s.map(a=>a.length));o='';for(i=w-1;i>=0;i--){for(c=0;C=s[c];c++){o+=C[i]||' '}o+='\n'}alert(o)}
A pretty Naïve solution to the problem. Parses the HTML with JQuery's $(string), then recursively builds a sideways mountain with the format:
/
/
children...
\
\
Then rotates the resulting string counterclockwise, and alerts the result.
j=(a,b,c,i)=>{s=(c=' '.repeat(b))+'/\n';for(i=0;V=a.children[i];i++){s=s+j(V,b+1)}return s+c+'\\\n';};f=s=>{s=j($(s)[0],0).split`
`;w=Math.max.apply(0,s.map(a=>a.length));o='';for(i=w-1;i>=0;i--){for(c=0;C=s[c];c++){o+=C[i]||' '}o+='\n'}return o}
update=_=>outp.textContent=f(inp.value)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id=inp oninput=update()></textarea>
<pre id=outp></pre>HTML + JavaScript (ES6), 8 + 192 = 200 bytes
JS
s=>[...(E.innerHTML=s,y=0,o=[],m=n=>1+[...n.children].map(m).join``+0)(E.firstChild)].map((c,x,a)=>{(o[y+=+c]||(o[y]=[...a].fill` `))[x]=`\\/`[c],y+=~-c})&&o.reverse().map(l=>l.join``).join`
`
HTML
<a id=E>
f=
s=>[...(E.innerHTML=s,y=0,o=[],m=n=>1+[...n.children].map(m).join``+0)(E.firstChild)].map((c,x,a)=>{(o[y+=+c]||(o[y]=[...a].fill` `))[x]=`\\/`[c],y+=~-c})&&o.reverse().map(l=>l.join``).join`
`
console.log(f(`<div>
<div>
<div>
</div>
<div>
</div>
<div>
<div>
</div>
</div>
</div>
</div>`))<a id=E>Less golfed
s=>{
E.innerHTML=s,
y=0,
o=[],
m=n=>1+[...n.children].map(m).join``+0,
[...m(E.firstChild)].map((c,x,a)=>{
y+=+c
if(!o[y]) o[y]=[...a].fill` `
o[y][x]=`\\/`[c]
y+=~-c
})
return o.reverse().map(l=>l.join``).join`\n`
}