CSS: создать границу с помощью CSS

У меня есть этот fragment кода:

.multiply-button { display: table; background: rgba(0, 0, 0, 0); border: none; color: white; padding: 0; } .multiply-button-content { display: table-cell; background: green; padding: 10px 9px; border: solid 1px black; border-right: none !important; } .multiply-button-arrow { display: table-cell; width: 0px; height: 0px; border-style: solid; border-width: 20px 0 20px 12px; border-color: transparent transparent transparent green; } 
  

Мне нужно сделать границу на этой кнопке со стрелками. Я могу легко разместить прямоугольную часть (я уже это сделал), но как сделать эту границу на треугольной части?

Следующее должно делать то, что вам нужно

 .multiply-button { display: table; background: rgba(0, 0, 0, 0); border: none; color: white; padding: 0; } .multiply-button-content { display: table-cell; background: green; padding: 0 9px; border: solid 1px black; border-right: none !important; position: relative; vertical-align:middle; height: 40px; /* double the border width */ box-sizing: border-box; } .multiply-button-content:after, .multiply-button-content:before { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 20px 0 20px 12px; margin-top: -20px; } .multiply-button-content:after { border-color: rgba(0, 128, 0, 0); border-left-color: #008000; margin-left: -1px; } .multiply-button-content:before { border-color: rgba(0, 0, 0, 0); border-left-color: #000000; } того, как .multiply-button { display: table; background: rgba(0, 0, 0, 0); border: none; color: white; padding: 0; } .multiply-button-content { display: table-cell; background: green; padding: 0 9px; border: solid 1px black; border-right: none !important; position: relative; vertical-align:middle; height: 40px; /* double the border width */ box-sizing: border-box; } .multiply-button-content:after, .multiply-button-content:before { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 20px 0 20px 12px; margin-top: -20px; } .multiply-button-content:after { border-color: rgba(0, 128, 0, 0); border-left-color: #008000; margin-left: -1px; } .multiply-button-content:before { border-color: rgba(0, 0, 0, 0); border-left-color: #000000; } 
  
 div{ position: relative; background-color: #008000; padding: 0px 16px; height: 40px; line-height: 40px; display: inline-block; color: white; border: 2px solid black; border-right: none; z-index:1; } div:before{ content: ''; position: absolute; left: 100%; z-index:-1; width: 28px; height: 28px; background-color: #008000; border-right: 2px solid black; border-bottom: 2px solid black; transform: rotate(-45deg) translate(-14px,-7px); } тем div{ position: relative; background-color: #008000; padding: 0px 16px; height: 40px; line-height: 40px; display: inline-block; color: white; border: 2px solid black; border-right: none; z-index:1; } div:before{ content: ''; position: absolute; left: 100%; z-index:-1; width: 28px; height: 28px; background-color: #008000; border-right: 2px solid black; border-bottom: 2px solid black; transform: rotate(-45deg) translate(-14px,-7px); } 
 
Multiply

Или намного проще:

CSS только с одним псевдоэлементом

  .multiply-button { background: rgba(0, 0, 0, 0); border: none; width: 100px; color: #FFF; padding: 0; overflow: hidden; } .multiply-button-content { display: block; position: relative; background: #008000; width: 60px; padding: 10px 9px; border: solid 1px #000; border-right: none !important; } .multiply-button-content:before { content: ""; position: absolute; width: 36px; height: 31px; z-index: -1; top: 0; right: -13px; border: 1px solid #000; background: #008000; transform: rotate(45deg); } 
   

Поскольку для создания «точки» требуется только один псевдоэлемент, вы можете использовать другой, чтобы сделать границу за ней (делая ее немного больше по размеру).

Например;

 div { height: 30px; border: 2px solid black; display: inline-block; border-right: 2px solid transparent; line-height: 30px; text-align: center; position: relative; background: tomato; color: white; } div:before { content: ""; position: absolute; border: 17px solid transparent; border-left: 17px solid black; right: -35px; top: -2px; z-index: 6; } div:after { content: ""; position: absolute; border: 15px solid transparent; border-left: 15px solid tomato; right: -31px; top: 0; z-index: 8; } 
 
Arrow, Please!

Вы можете достичь этого с помощью :before или :after псевдоселекторов. Изучите и отрегулируйте пример ниже.

 .multiply-button { display: inline; background: rgba(0, 0, 0, 0); border: none; color: white; padding: 0; position: realtive; } .multiply-button-content { display: table-cell; background: green; padding: 10px 9px; border: solid 1px black; border-right: none !important; width: 100px; position: relative; } .multiply-button-arrow { width: 0; height: 0px; border-style: solid; border-width: 20px 0 20px 12px; border-color: transparent transparent transparent black; position: absolute; top: -2px; right:-12px; } .multiply-button-arrow:before { border-style: solid; border-width: 20px 0 20px 12px; border-color: transparent transparent transparent green; position: absolute; right: 1px; top: -20px; content: ""; }