0

Как сделать края кнопки как 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;
}
4

2 ответа 2

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.

1
  • Не так, нужно вот так
    – Griesur
    22 авг 2019 в 15:40
0

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

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;
        }
1
  • тени, наверное, нужно делать отдельно для :after и :before. А вообще я сомневаюсь что эта форма делается как border-radius 22 авг 2019 в 16:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.