CSS 切一半右上边框和一半右上边框

Question

如何实现这种复选框（如下图所示）？我尝试了一些代码，但它不会像我预期的那样工作。我不熟悉css之前，之后的伪元素。

.chkbox {
  height: 15px;
  width: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  position: relative;
  transition: border-color ease 0.125s;
  -ms-transition: border-color ease 0.125s;
  -moz-transition: border-color ease 0.125s;
  -webkit-transition: border-color ease 0.125s;
  cursor: pointer;
  border-radius: 2px;
}
.chkbox:before {
  right: -1px;
  width: 1px;
  top: -1px;
  height: 8px
}
.chkbox:after {
  top: -1px;
  right: 0;
  width: 2px;
  height: 2px
}

Answer 1

尝试像这样覆盖边框

.chkbox:before {
   content: "";
   width: 7px;
   height: 7px;
   background:white;
   position:absolute;
   right:-1px;
   top:-1px;
}

这是给你的 fiddle 例子 https://jsfiddle.net/th9qpdvh/2/

你也可以使用图片来达到这个目的

Answer 2

为什么不使用剪辑路径？删除伪元素并添加类似 clip-path: polygon(0 0, 65% 0%, 65% 25%, 100% 25%, 100% 100%, 0 100%);

的内容

.chkbox {
  height: 15px;
  width: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  position: relative;
  transition: border-color ease 0.125s;
  -ms-transition: border-color ease 0.125s;
  -moz-transition: border-color ease 0.125s;
  -webkit-transition: border-color ease 0.125s;
  cursor: pointer;
  border-radius: 2px;
  clip-path: polygon(0 0, 65% 0%, 65% 25%, 100% 25%, 100% 100%, 0 100%);
}

<div class="chkbox"></div>

顺便说一下，这非常方便 http://bennettfeely.com/clippy/

Answer 3

试试这个

.chkbox {
    height: 15px;
    width: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    position: relative;
    transition: border-color ease 0.125s;
    -ms-transition: border-color ease 0.125s;
    -moz-transition: border-color ease 0.125s;
    -webkit-transition: border-color ease 0.125s;
    cursor: pointer;
    border-radius: 2px;
    box-shadow: 1px -1px 2px #ccc;
}
.chkbox:after {
    content: '';
    display: block;
    right: -3px;
    width: 9px;
    top: -3px;
    height: 9px;
    background: #fff;
    position: absolute;
}

<div class="chkbox"></div>

Answer 4

这是一个例子。

.chkbox {
  display: none;
}

.chkbox+label {
  display: inline-block;
  color: #666666;
  position: relative;
  padding-left: 30px;
  margin: 7px 10px;
  font-size: 16px;
  line-height: 20px;
}

.chkbox+label:before {
  content: "";
  line-height: 20px;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: -1px;
  border-radius: 3px;
  border: 1px solid #aaaaaa;
}

.chkbox+label:after {
  height: 7px;
  width: 7px;
  content: "";
  background-color: #ffffff;
  position: absolute;
  left: 13px;
  top: -1px;
}

<input type="checkbox" class="chkbox">
<label for="check1">Morning</label>

Answer 5

不能直接将输入的type="checkbox"元素修改成想要的形状，因为：

输入元素没有伪元素。
您不能使用其中一个答案中提到的剪辑路径，因为浏览器支持非常低（如果您担心这一点。）CanIUse Reference

所以我建议你选择

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    display: inline-block;
    position: relative;
    color: #404040;
    padding-left: 30px;
    margin: 7px 10px;
    font-size: 16px;
    line-height: 20px;
}

input[type="checkbox"] + label:before, input[type="checkbox"] + label:after {
    content: "";
    position: absolute;
    display: block;
}

input[type="checkbox"] + label:before {
    width: 18px;
    height: 18px;
    left: 0;
    top: -1px;
    border-radius: 3px;
    border: 1px solid #aaaaaa;
}

input[type="checkbox"] + label:after {
    height: 7px;
    width: 7px;
    background-color: #ffffff;
    left: 13px;
    top: -1px;
}

Answer 6

使用下面的 class 隐藏了那些角边界。

很少有其他答案是好的。但是，它不适用于某些浏览器。另一个答案影响了我的 TICK css class。最后我找到了下面的解决方案来解决这个问题而没有兼容性问题。

JsFiddle

.hideWhite{
width:10px;
height:10px;
background:#fff;
border-radius:50%;
position:absolute;
top:-2px;
right:-4px;
display:inline-block
}

CSS 切一半右上边框和一半右上边框

CSS cut half top right border and half right top border

html

css

pseudo-element