треугольная кнопка с плюсом

Question

.btnTriangle {
  display: flex;
  flex: auto;
  color: white;
  width: 0px;
  height: 0px;
  border: 44px solid black;
  border-top-color: transparent;
  border-bottom-color: transparent;
  background-color: transparent;
  border-right-color: transparent;
  border-left-color: #8A2336;
}

<button class="btnTriangle">+</button>

белый плюс (+) в треугольник как можно вставить ?

Answer 1

Предложу такой вариант "добавления" плюса в треугольник

.btnTriangle {
  /*
  display: flex;
  flex: auto;
  color: white;
  */
  position: relative;
  width: 0px;
  height: 0px;
  border: 44px solid black;
  border-top-color: transparent;
  border-bottom-color: transparent;
  background-color: transparent;
  border-right-color: transparent;
  border-left-color: #8A2336;
}
.btnTriangle:before {
  content: '+';
  position: absolute;
  top: -27px;
  left: -40px;
  color: white;
  font-size: 50px;
}

<button class="btnTriangle"></button>

Answer 2

Придание треугольной формы с помощью border, больше подходит для фигур не содержащих какой-либо контент. В вашем случае, лучше использовать свойство clip-path :

.btnTriangle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 88px;
  padding-right: 1em;
  border: none;
  color: white;
  background-color: #8A2336;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

<button class="btnTriangle">+</button>

БЛОГ НА HUSL

треугольная кнопка с плюсом

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