Question

如何设置不同形状的复选框（如三角形）并且只能在三角形区域上单击？

input[type=checkbox] {
    display: none;
}

    input[type=checkbox] + label {
        display: inline-block;
        background: url("http://www.bildites.lv/images/8pzgmznr/54227/original.jpg") no-repeat;
        height: auto;
        margin: 20px 0 0 20px;
        padding: 25px 0 0 80px;
    }
    input[type=checkbox]:checked + label {
        height: auto;
        margin: 20px 0 0 20px;
        padding: 25px 0 0 80px;
        background: url("http://www.bildites.lv/images/hfy3gneu/54217/original.jpg");
        background-repeat: no-repeat;
    }

<div>
        <input type="checkbox" checked id="c1" />
        <label for="c1"></label>
    </div>

Answer 1

使标签变小。（点击标签就像点击输入本身一样）

我用过：

margin: 0;
padding: 10px;

两种输入样式。使用周围的div给三角形一个位置。

Answer 2

使用HTML

<map>

和

<area>

定义图像上的形状，在您的情况下，可以是透明.png或.gif图像上的三角形。你可以有一个

<input type="hidden">

在您的表单中，并使用javascript更改其值。使用javascript，您还可以在图像内部单击后更改图像。这就是jQuery如何检测您单击的位置。在下面的示例中，它指出了所点击的内容。使用相同的jQuery来更改隐藏文本输入的值。

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(document).ready(function(){
        $("area").click(function(){
            var x = $(this).attr("id");
            $("#result").text(x);
        });
    });
    </script>
</head>
<body>

    <p>Click on the sun or on one of the planets.</p>

    <img src="http://cakewalkwebsites.com/img/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

    <map name="planetmap">
        <area id="sun" shape="rect" coords="0,0,82,126" alt="Sun" href="#sun">
        <area id="mercury" shape="circle" coords="90,58,3" alt="Mercury" href="#mercury">
        <area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="#venus">
    </map>

    <p id="result"></p>

</body>
</html>

Answer 3

使用`clip-path`。

Clip-path @ MDN

剪辑路径CSS属性通过定义要显示的剪辑区域来阻止元素的一部分显示，即仅显示元素的特定区域。剪切区域是指定为引用内联或外部SVG的URL的路径，或者是诸如circle（）之类的形状方法。 clip-path属性替换现在已弃用的剪辑属性。

* {
  box-sizing: border-box;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]+label {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 1em;
  background: red;
}

input[type=checkbox]:checked+label {
  background: green;
}

label {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

<div>
  <input type="checkbox" checked id="c1" />
  <label for="c1"></label>
</div>

Answer 4

要创建三角形，请使用border属性

input {
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
}

input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label {
  width: 0;
  height: 0;
  display: block;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

input[type="checkbox"]:not(:checked) + label {
  border-top: 20px solid red;
}

input[type="checkbox"]:checked + label {
  border-bottom: 20px solid red;
}

<input type='checkbox' id='demo'>
<label for="demo"></label>

如何使用不同形状（如三角形）制作复选框，并且只能在三角形区域上单击？

4 个答案:

使用`clip-path`。

如何使用不同形状（如三角形）制作复选框，并且只能在三角形区域上单击？

4 个答案:

使用clip-path。

使用`clip-path`。