CSS- DIV的左上角的邮政检查标记

Question

我想拥有一个像复选框一样的div元素。当用户单击一次时，复选框将出现在左上角。如果用户再次单击DIV，则复选框将消失。目前，我正在使用以下CSS，可以在此小提琴中看到。

.my-checkfield {
  border: solid 1px black;
  color: black;
  padding: 24px;
  position: relative;
}
.my-checkfield-selected {
  border: solid 1px green;
}
.my-checkfield-selected::before,
.my-checkfield-selected::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-color: transparent;
  border-style: solid;
}
.my-checkfield-selected::before {
  border-width: 0;
}
.my-checkfield-selected::after {
  border-radius: 0;
  border-width: 12px;
  border-left-color: green;
  border-top-color: green;
}        

如小提琴所示，三角形成功切换。但是，我想在该三角形中显示一个白色的复选标记。我该怎么做，最好是使用CSS。我不确定要去哪里。

谢谢，

Answer 1

通过交换::before/::after，因此::before用于绿色角，您可以简单地添加content: '2713'(2713是A chepmark Marksk 的CSS代码(到::after

function toggle(elem) {
  $(elem).toggleClass('my-checkfield-selected');
}

.my-checkfield {
  border: solid 1px black;
  color: black;
  padding: 24px;
  position: relative;
}
.my-checkfield-selected {
  border: solid 1px green;
}
.my-checkfield-selected::before,
.my-checkfield-selected::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-color: transparent;
  border-style: solid;
}
.my-checkfield-selected::after {
  content: '2713';
  font-size: 13px;
  line-height: 13px;
  font-weight: bold;
  color: white;
}
.my-checkfield-selected::before {
  border-radius: 0;
  border-width: 12px;
  border-left-color: green;
  border-top-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-checkfield" onclick="toggle(this)">
  [hi]
</div>

Answer 2

您不能将任何东西都放在仅由边界制成的元素(或伪元素(中。

因此，您需要作为一个建议，使用平方伪元素，图像作为背景，然后以A second 梯度背景为颜色。

.my-checkfield {
  border: solid 1px black;
  color: black;
  padding: 24px;
  position: relative;
}
.my-checkfield::before,
.my-checkfield::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background-image: 
  url(http://www.clker.com/cliparts/p/e/X/9/d/4/check-mark-white-md.png), 
  linear-gradient(135deg, green 50%, transparent 50%);
  background-size: 70% auto, cover;
  background-position: auto, left top;
  background-repeat: no-repeat;
}

<div class="my-checkfield" ) ">
  [hi]
</div>