CSS切割半右上邊框和半右上邊框

如何實現這種複選框（圖片如下所示）？我嘗試了一些代碼，但它不會按我的預期工作。在僞元素之前我不熟悉css。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 
}

來源

2017-03-09 Karuppiah

隱藏使用下面這個類的角落邊界。

很少有其他答案是好的。但是，它在某些瀏覽器上不起作用。另一個答案影響我的TICK css類。最後，我發現下面的解決方案來解決這個問題沒有兼容性問題。

JsFiddle

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

來源

2017-03-28 10:39:15 Karuppiah

嘗試超越國界這樣

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

這裏是你 https://jsfiddle.net/th9qpdvh/2/

例如小提琴

您也可以將圖像用於此目的

來源

2017-03-09 08:00:39

爲什麼不使用剪輯路徑？刪除僞元素，只是添加類似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/

來源

2017-03-09 08:09:51

試試這個

.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>

來源

2017-03-09 08:10:38 scarleter

這裏是一個例子。

.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>

來源

2017-03-09 08:12:44 Pugazh

不能修改輸入類型= 「複選框」元件成所需的形狀，直接的，因爲：

輸入元件不具有僞構件。
在由於非常低的瀏覽器支持的答案中提到你不能使用夾路徑（如果那是一個關心你。）CanIUse Reference

所以我建議你去與@Pugazh's answer

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; 
}

來源

2017-03-09 08:34:12

CSS切割半右上邊框和半右上邊框

回答

相關問題