Как написать текст внутри перевернутой трапеции (форма)? - PullRequest
Новая
       2

Как написать текст внутри перевернутой трапеции (форма)?

0 голосов
/ 01 мая 2020

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

Все, что я хочу, это поместить свой текст внутри перевернутого треугольника :(

Спасибо <3 </p> 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.trapezoid2 {
 width: 23px;
    height: 0px;
    border-top: 140px solid #20a3bf;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}
</style>
</head>
<body>

<div class="trapezoid2 ">thanks</div>

</body>
</html>

1 Ответ

0 голосов
/ 01 мая 2020

Если похожий вопрос, которым я поделился в комментарии, не помогает, вот другой способ с CSS псевдо-классами. Предупреждение о том, что текст находится в CSS вместо div

.trapezoid2 {
  width: 23px;
  height: 0px;
  border-top: 140px solid #20a3bf;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
}

.trapezoid2::after {
  content: "Thanky";
  display: block;
  position: relative;
  top: -100px;
  left: -10px;
}


/* Small devices (landscape phones, 576px and up) */

@media only screen and (min-width: 576px) {
  .trapezoid2 {
    border-top-color: red;
  }
}


/* Medium devices (tablets, 768px and up) */

@media only screen and (min-width: 768px) {
  .trapezoid2 {
    border-top-color: #bf2090;
  }
}


/* Large devices (desktops, 992px and up) */

@media only screen and (min-width: 992px) {
  .trapezoid2 {
    border-top-color: rebeccapurple;
  }
}


/* Extra large devices (large desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
  .trapezoid2 {
    border-top-color: cyan;
  }
}
<div class="trapezoid2"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...