剃须刀html.radiobutton位置成像

我需要有关如何处理需要格式化HTML页面的任务的建议。假设我有一个圆形的图像，我需要在它周围放置7个radiobutton。从理论上讲，可以使用Dev对象来实现它，但在我看来，这样做是复杂的。还有其他方法可以在圆圈周围放置放射线吗？

任何帮助将不胜感激。

https://jsfiddle.net/le4nz2l5/

<!DOCTYPE html>
<html>
<head>
    <style class="cp-pen-styles">
        html,
        body {
        width: 100%;
        height: 100%;
        }
        body {
        position: relative;
        background-color: #ddd;
        overflow: hidden;
        }
        .main,
        .container {
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        }
        .main {
        background-color: #B81365;
        box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);
        cursor: pointer;
        z-index: 50;
        }
        .main .title {
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        font-size: 3em;
        line-height: 80px;
        text-align: center;
        color: #fafafa;
        }
        .container {
        z-index: 10;
        }
        .plate {
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width:13px;
        height:13px;
        text-align:center;
        }
        .main + .container .plate:nth-of-type(1) {
        top: -180%;
        }
        .container .plate:nth-of-type(2) {
        top: -130%;
        right: -120%;
        }
        .container .plate:nth-of-type(3) {
        right: -170%;
        }
        .container .plate:nth-of-type(4) {
        right: -120%;
        bottom: -130%;
        }
        .container .plate:nth-of-type(5) {
        bottom: -180%;
        }
        .container .plate:nth-of-type(6) {
        bottom: -130%;
        left: -140%;
        }
        .container .plate:nth-of-type(7) {
        left: -190%;
        }
        .container .plate:nth-of-type(8) {
        top: -130%;
        left: -140%;
        }
    </style></head><body>
    <center>
    based on:<a href="http://codepen.io/Oka/pen/BNjwNz">Colin Hall-Coates codepen</a>
    </center>
    <label class='main' for='check'>
        <div class='title'>
            <i class='fa fa-bars'></i>
        </div>
    </label>
    <div class='container'>
        <a class='plate' href='#'>
        <input type="radio"></input>
        </a>
        <a class='plate' href='#'>
        <input type="radio"></input>
        </a>
        <a class='plate' href='#'>
        <input type="radio"></input>
        </a>
        <a class='plate' href='#'>
        <input type="radio"></input>
        </a>
        <a class='plate' href='#'>
        <input type="radio"></input>
        </a>
        <a class='plate' href='#'>
        <input type="radio"></input>
        </a>
        <a class='plate' href='#'>
        <input type="radio"></input>
        </a>
        <a class='plate' href='#'>
        <input type="radio"></input>
        </a>
    </div>
</body></html>

相关内容

最新更新

热门标签：