CSS yarmi yuqori o'ng va yarim o'ng yuqori chegarasini kesib tashladi

Ushbu turdagi katakchalarga qanday qilib erishishim mumkin? Men kodni sinab ko'rdim, lekin kutganimga yaramaydi. Avvalo, psixologik elementlardan keyin CSS bilan tanish emasman.

enter image description here

JSFiddle

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

6 javoblar

Why not use clip-path? Remove pseudo-elements and just add something like clip-path: polygon(0 0, 65% 0%, 65% 25%, 100% 25%, 100% 100%, 0 100%);

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

That's very handy, by the way http://bennettfeely.com/clippy/

2
qo'shib qo'ydi

Mana bir misol.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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">
</div> </div>
1
qo'shib qo'ydi

Ushbu kichkina burchakda bu sinfdan foydalanib foydalanish mumkin.

Boshqa ba'zi javoblar yaxshi. Ammo, ba'zi brauzerlarda ishlamaydi. Boshqa javob mening TICK CSS sinfiga ta'sir qiladi. Oxir-oqibat, men bu masalani mos kelmaslik muammosiz hal qilish uchun hal qildim.

JsFiddle

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

Bu kabi chegaralarni bekor qilishga harakat qiling

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

here is fiddle example for you https://jsfiddle.net/th9qpdvh/2/

Bundan tashqari, ushbu maqsad uchun rasmni ishlatishingiz mumkin

0
qo'shib qo'ydi

Kirish turi = "checkbox" elementini to'g'ridan-to'g'ri kerakli shaklga o'zgartira olmaysiz, chunki:

  1. Input elements don't have pseudo elements.
  2. You cannot use clip-path as mentioned in one of the answers because of very low browser support (if that is a concern for you.) CanIUse Reference

So I would suggest you to go with @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;
}
0
qo'shib qo'ydi

Buni ko'ring

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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>
</div> </div>
0
qo'shib qo'ydi