Div Handle

HTML

<div id="container">
    <div id="controls">
        <button id="close">X</button>
        <button id="minimize">&mdash;</button>
        <button id="move"></button>
    </div>
    <i></i>
</div>

CSS

div#container {
    width: 200px;
    height: 200px;
    background-color: #555;
    padding: 10px;
    position: relative;
    border: 2px solid black;
    border-radius: 5px 5px 5px 5px;
}

div#controls {
    width: 20px;
    height: 56px;
    background: transparent;
    position: absolute;
    left: 220px;
    margin-top: -12px;
    padding-top: 5px;
}
div#controls > button {
    position: relative;
    z-index: 1;
}

div#controls:after {
    /*content: "";*/
    position: absolute;
    left: -1px;
    border: solid;
    width: 10px; height: 10px;
    border-color: black;
    border-width: 2px 0 0 2px;
    border-top-left-radius: 5px;
}

#close, #move, #minimize {
    width: 100%
}

#move {
    cursor: move;
    height: 25px;
}

#move:after {
    content: ":::";
}

button {
    padding: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    outline: none;
}

i {
    background-color: gray;
    border-radius: 5px;
    width: 100px;
    height: 100px;
    margin: 0px auto;
    display: block;
    cursor: pointer;
}

i:hover {
    background-color: lightgray;
}

svg {
    position: absolute;
    top: 0;
    left: -2px;
}