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

16 июня 2021, 09:50

Как сделать края кнопки как border-radius, но треугольной формы?

button{  
background-color:#caa777; 
border-top:none;  
border-left:none;   
border-right:1px solid rgba(0,0,0,0.5);
border-bottom:1px solid rgba(0,0,0,0.5);  
outline:none;  
}
button:hover{
background-color:#cfac7c;     
}
button:active{
background-color:#967c66;
border-top:1px solid rgba(0,0,0,0.5);
border-left:1px solid rgba(0,0,0,0.5);    
border-bottom:none;  
border-right:none;
}

Answer 1

Не совсем понял задачу, нужно сделать border треугольником или треугольниками? Если одним треугольником, то вот так (кнопка становится прямоугольным треугольником, хорошее описание есть на этом сайте http://htmlbook.ru/blog/treugolniki-cherez-css

button{
        padding: 0;
        background-color:transparent;
        border: 10px solid transparent;
        border-bottom: 10px solid #caa777;
        outline:none;
        }
        button:hover{
        border-bottom: 10px solid #cfac7c;
        }
        button:active{
        background-color:transparent;
        border: 10px solid transparent;
        border-bottom: 10px solid #967c66;
      }

Если треугольниками, то подойдет свойство border-image, с помощью которого вы можете установить свой border.

Answer 2

Попытался сделать что-то похожее, возможно подойдет (осторожно, костыли) :)

button{
        width: 100px;
        padding: 0;
        background-color:#caa777;
        outline:none;
        border: none;
        position: absolute;
        }
        button::before,
        button::after{
          content:'';
          background-color:transparent;
          border: 2px solid transparent;
          border-right: 2px solid #caa777;
          outline:none;
          position: absolute;
          top:0;
          padding-top: 5.7px;
          padding-bottom: 5.7px;
        }
        button::after{
          right:-4px;
          transform:rotate(180deg);
        }
        button::before{
          left: -4px;
        }
        button:hover{
          background-color:#cfac7c;
        }
        button:hover:before,
        button:hover:after{
          border-right: 2px solid #cfac7c;
        }
        button:active{
          background-color:#967c66;
        }
        button:active:before,
        button:active:after{
          border-right: 2px solid #967c66;
        }