In this post, I’ve shared a code for corner position picker using HTML and CSS.

HTML Code

<div id="aOrginCon">
    <label class="aOrType lt"><input type="radio" name="wcs-orgin" value="left-top" />
        <div></div>
    </label>
    <label class="aOrType ct"><input type="radio" name="wcs-orgin" value="center-top" />
        <div></div>
    </label>
    <label class="aOrType rt"><input type="radio" name="wcs-orgin" value="right-top" />
        <div></div>
    </label> 
    <label class="aOrType lc"><input type="radio" name="wcs-orgin" value="left-center" />
        <div></div>
    </label>
    <label class="aOrType cc"><input type="radio" name="wcs-orgin" value="center-center" />
        <div></div>
    </label>
    <label class="aOrType rc"><input type="radio" name="wcs-orgin" value="right-center" />
        <div></div>
    </label> 
    <label class="aOrType lb"><input type="radio" name="wcs-orgin" value="left-bottom" />
        <div></div>
    </label>
    <label class="aOrType cb"><input type="radio" name="wcs-orgin" value="center-bottom" />
        <div></div>
    </label>
    <label class="aOrType rb"><input type="radio" name="wcs-orgin" value="right-bottom" />
        <div></div>
    </label>
</div>

See the Pen HTML CSS Select Position by Raj (@cserajee) on CodePen.

CSS Code

#aOrginCon {
    margin: 50px auto;
    width: 50px;
    height: 50px;
    border: solid 1px #666;
    position: relative;
}

.aOrType {
    position: absolute;
}

.aOrType input {
    display: none;
}

.aOrType input+div {
    border: solid 1px #000;
    margin: 0px;
    padding: 5px;
    cursor: pointer;
}

.aOrType input:checked+div {
    background: #000;
}

.aOrType.lt {
    left: -6px;
    top: -6px;
}

.aOrType.ct {
    left: 19px;
    top: -6px;
}

.aOrType.rt {
    right: -6px;
    top: -6px;
}


.aOrType.lc {
    left: -6px;
    top: 18px;
}

.aOrType.cc {
    left: 19px;
    top: 18px;
}

.aOrType.rc {
    right: -6px;
    top: 18px;
}


.aOrType.lb {
    left: -6px;
    top: 44px;
}

.aOrType.cb {
    left: 19px;
    top: 44px;
}

.aOrType.rb {
    right: -6px;
    top: 44px;
}