Как сделать кнопку в виде прямоугольника со срезанным углом на CSS

Question

Как можно сделать кнопку такой формы на чистом CSS?

Answer 1

вот так можно:

.button {
    position: relative;
    
    width:    150px;
    height:   50px;
    
    border:   2px solid #007bff;
}

.button:before, .button:after {
    content:  "";
    
    width:    0px;
    height:   0px;
    
    position: absolute;
    
    bottom:   -2px;
    right:    -2px;
    
    border-style: solid;
}

.button:before {
    border-width: 0 0 20px 20px;
    border-color: transparent transparent #007bff transparent;
}

.button:after {
    border-width: 0 0 17px 17px;
    border-color: transparent transparent white transparent;
}

<div class = 'button'></div>

Answer 2

body{
  background: #cda;
}
.button{
  width: 150px;
  height: 50px;
  position: relative;
  border: 2px solid #007bff;
  clip-path: polygon(0 0, 100% 0, 100% 25px, calc(100% - 25px) 100%, 0 100%)
}
.button:before{
  content: '';
  display: block;
  position:absolute;
  top:20px;
  right: -2px;
  border-top: 2px solid #007bff;
  width: 40px;
  transform-origin: right top;
  transform: rotate(-49deg);
}

<div class='button'></div>

Или вот так

body{
  background: #cda;
}
.button{
  width: 150px;
  height: 50px;
  position: relative;
  border: 2px solid #007bff;
  clip-path: polygon(0 0, 100% 0, 100% 25px, calc(100% - 25px) 100%, 0 100%);
  background: linear-gradient(-49deg, #007bff 18px, transparent  19px)
}

<div class='button'></div>

Answer 3

Вариант с прозрачностью и на линейных градиентах:

/* Only for demo */ body{margin:0;height:100vh;background-color:rgba(255,255,255,1);background-image:url(https://i.stack.imgur.com/m9NKc.png),radial-gradient(#fff8,#000f);background-position:0% 0%;background-repeat:no-repeat;background-size:auto;display:flex;justify-content:space-around;align-items:center}

button {
  height: 45px;
  width: 160px;
  border: none;
  background-color: transparent;
  background-image: linear-gradient(#1c9cf2, #1c9cf2), linear-gradient(#1c9cf2, #1c9cf2), linear-gradient(to right bottom, transparent calc(50% - 2px), #1c9cf2 calc(50% - 1px), #1c9cf2 50%, transparent calc(50% + 1px)), linear-gradient(#1c9cf2, #1c9cf2), linear-gradient(#1c9cf2, #1c9cf2);
  background-size: 100% 2px, 2px 75%, 6% 25%, 94% 2px, 2px 100%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%, 0 0;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 1px #000a);
  transition: .3s ease;
}
button:hover { filter: drop-shadow(0 5px 5px #0008); cursor: pointer; }

<button>BuTToN</button>

БЛОГ НА HUSL

Как сделать кнопку в виде прямоугольника со срезанным углом на CSS

Ответы (3 шт):