Как поместить текст внутри треугольной кнопки?

Я создаю треугольную кнопку в заголовке своей страницы и хочу поместить текст в кнопку.

Теперь текст находится за пределами кнопки.

Мой код:

.collapsible {
    position: absolute;
    left: 40%;
}

.triangle {
    font-size: 22px;
    color: #000;
    width: 190px;
    height: 140px;
    border-top: solid 140px #2b2b2b;
    border-left: solid 140px transparent;
    border-right: solid 140px transparent;
    border-bottom: transparent;
    background-color: transparent;
}

<button class = "collapsible triangle" id = "collapse">Some content</button>

Итак, как вы видите, текст находится за пределами кнопки, как можно установить внутреннюю кнопку?

в 2019 году мы больше не должны использовать границу для создания треугольников: проверьте это: stackoverflow.com/a/49696143/8620333 и посмотрите нижние ответы, чтобы найти хорошие способы, такие как background, clip-path, svg и т. д.

— 30.05.2019 13:55

html css

30.05.2019 13:39

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

152

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы могли бы сделать это так. Единственная проблема в том, что треугольник черный и текст внутри тоже черный. Вместо этого вы должны изменить цвет треугольника, чтобы увидеть текст.

<button class = "collapsible triangle" id = "collapse" value = "Some content"></button>

Не работает, меняю цвет текста

— 30.05.2019 13:47

30.05.2019 13:45

Ответ принят как подходящий

.collapsible {
    position: absolute;
    left: 40%;
}

.triangle {
    font-size: 22px;
    color: #000;
    width: 190px;
    height: 140px;
    border-top: solid 140px #2b2b2b;
    border-left: solid 140px transparent;
    border-right: solid 140px transparent;
    border-bottom: transparent;
    background-color: transparent;
}
.collapsible span{
    position: absolute;
    color:red;
    top:-120px;
    left: -30px;
}

<button class = "collapsible triangle" id = "collapse">
<span>Some content</span></button>

30.05.2019 13:54

Другие вопросы по теме

Пункт меню «Преобразование поворота» Круговое меню

Межбуквенный интервал CSS вместе со сквозной строкой

Проблема с анимацией выпадающего меню react-native-material при клике

Как экспортировать HTML в документ без рамки или цветного текста

Почему при загрузке изображения не отображается текст предварительного просмотра изображения?

Установить ширину раскрывающегося списка ng-multiselect

Скрыть элемент с помощью JQuery и активировать кнопку

IE Flexbox не учитывает размер дочернего flexbox

Базовый javascript не работает должным образом

Как привязать класс к более чем двум параметрам в Vue.js?

Как поместить текст внутри треугольной кнопки?

Ответы 2

Другие вопросы по теме

Похожие вопросы