Создание :: прежде чем реагировать - PullRequest
Новая
       16

Создание :: прежде чем реагировать

0 голосов
/ 29 марта 2020

Я занимаюсь JSX-работой и хотел воссоздать этот Figma wireframe . Я воссоздал «разделители» в заголовке (угловые линии), но я хотел бы сделать их отзывчивыми. Это класс S CSS, который обрабатывает создание строк 

.header {
  grid-area: header;
  margin-left: 5%;
  margin-right: 8%;
  .header-list {
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    li {
      position: relative;
      ::before {
        content: "";
        display: inline-block;
        width: 100px;
        height: 1px;
        background: white;
        position: absolute;
        top: 10px;
        right: calc(100% + 150px);
        transform: rotate(-45deg);
      }
      }

И я реализую его здесь, в моем файле React 

      <div classname="header-wrapper">
        <nav className="header">
            <ul className="header-list">
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">About me</a>
              </li>
              <li>
                <a href="#">Projects</a>
              </li>
              <li>
                <a href="#">Contact</a>
              </li>
            </ul>
        </nav>
      </div>

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

...