JSFiddle - React, Tailwind, and code Playground

by sanford

HTML

<div id="player"><div id="ul"><img src="http://www.figureone.com/favicon.png"></div><div id="ur"></div><div id="bl"></div><div id="br"></div>spl</div>

CSS

ZZbody { outline: red 1px solid; width: 100%; height: 100%;}

#player {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -170px;
    margin-top: -120px;
    border: 1px solid #515151;
    border-bottom: 4px double #515151;
    height:240px;
    width:320px;
}
#ul,#ur,#bl,#br {
    width: 2000px;
    height: 2000px;
    border: 1px dotted blue;
    position:absolute;
}
#ul {
    bottom: 100%;
    right: 100%;
}
#ur {
    bottom: 100%;
    left: 100%;
}
#bl {
    top: 100%;
    right: 100%;
}
#br {
    left: 100%;
    top: 100%;
}
#ul img {
    position: absolute;
    border: 5px solid red;
    right: 0;
    bottom: 0;
}