добавление текста в фигуру - PullRequest
Новая
       2

добавление текста в фигуру

0 голосов
/ 10 июля 2020

Как мне не только сохранить этот текст по центру, но и сделать так, чтобы граница параллелограмма обтекала h1? Я все еще новичок в веб-дизайне ... Я начал с добавления нужной формы, сделав цвет таким же, как фон, и просто добавил границу. Но применение его к h1 портит всю компоновку! (не по центру) Также я не повозился с его размерами, потому что он неправильно размещается на странице. 

:root {
    background: #dcd0ff;
}
h1 {
  font-family: 'Sacramento';font-size: 45px;text-align: center;
}
#shape1{
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background: #dcd0ff;
  border: 1px black solid;
}
<h1 id="shape1">
  Sarra's Homemade Kombucha!
</h1>

Ответы [ 2 ]

0 голосов
/ 10 июля 2020 
<style>
:root {
    background: #dcd0ff;
}

#shape1 {
      width: 150px;
      height: 100px;
      transform: skew(20deg);
      background: #dcd0ff;
      border: 1px black solid;
      text-align: center;
    }

h1 {
    font-size: 1em;
}
</style>
<div id="shape1">
    <h1>Sarra's Homemade Kombucha!</h1>
</div>

Вот как бы я это сделал. Мне легче использовать <div> при работе с такими фигурами. Они предназначены для использования в качестве контейнеров для других элементов, что вы и пытаетесь сделать здесь.

0 голосов
/ 10 июля 2020

У вас было несколько css синтаксических ошибок. И лучше всего обернуть текст тегом (я использовал <span>) в приведенном ниже примере.

EDIT: установите для margin-right / left значение auto, чтобы центрировать h1. Подробнее о выравнивании полей здесь ------> CSS Margin .

И @ dvfleet413 тоже прав. Вам действительно следует использовать div для чего-то вроде этого (контейнеры и тому подобное), а затем поместить свой h1 внутри этого div.

JavaScript не требуется. Это просто тестовый шаблон, который я всегда использую. Удалит

Комментарии добавлены. 

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
      root {
    background: #dcd0ff;
}
/* you were missing a closing bracket here*/
div {
    font-family: 'Sacramento';font-size: 45px;text-align: center;
    }
#shape1 {
    /*only set width on container*/
width: 40%;
        padding: 30px;
      transform: skew(20deg);
      background: #dcd0ff;
      border: 1px black solid;

      /*set margin-left/right to auto to center*/
      margin-right: auto;
      margin-left: auto;
    }
    #shape1 span {
        /*set height/width of span*/
        height: 100%;
        width: 100%;
    }
    </style>
</head>
<body>

<div id="shape1">
   <span>Sarra's Homemade Kombucha!</span>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...