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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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