Стиль формы в Sketch из CSS

то, что я хочу сделать, это добиться изображения с помощью css, но я не смог добиться именно того, чего хочу. Заранее спасибо за помощь в том, как это сделать.

Стиль формы в Sketch из CSS

.alt {
    color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 130px;
    background-color: #d2151e;
}
.alt:before {
    content: ' ';
    background: none;
    display: block;
    height: 0;
    position: absolute;
    width: 0;
    top: 0;
    left: 50%;
    z-index: 99;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #ffffff;
}
.alt:after {
    content: '';
}
<div class = "alt flex">
        <div class = "flex w-full h-full item-center">
            <div style = "width: 40%">
            </div>
        </div>
        <div class = "logo">
        </div>
</div>

Вы действительно должны использовать svg для этого

Zach Jensz 02.04.2022 12:43

как рисовать свг

Liza 02.04.2022 12:46

Вы можете использовать бесплатную программу Inkscape, или figma, или один из многих веб-редакторов SVG.

Zach Jensz 02.04.2022 12:47

у меня нет навыков рисования

Liza 02.04.2022 13:00
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
4
37
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вот что вы можете сделать с помощью css

.alt {
    color: white;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 130px;
    background-color: #d2151e;
  }
  .alt:before {
      content: ' ';
      background: none;
      display: block;
      height: 0;
      position: absolute;
      width: 0;
      top: 0;
      left: 32%;
      z-index: 99;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 20px solid #ffffff;
  }
  .alt:after {
      content: '';
  }
  .logo {
      background: #f0f0f0;
      width: 40%;
      height: 160px;
      position: absolute;
      right: -100px;
      box-shadow: -2px 1px 4px #757575c9;
      top: -30px;
      border-radius: 15px 0 0 0;
      -webkit-transform: skew(-45deg);
      -moz-transform: skew(-45deg);
      -ms-transform: skew(-45deg);
      transform: skew(-45deg);
      overflow: hidden;
  }

и html есть

<div class = "alt flex">
<div class = "flex w-full h-full item-center">
    <div style = "width: 40%">
    </div>
</div>
<div class = "logo">
</div>
Ответ принят как подходящий

Что-то подобное ?

:root {
  --card-width: 200px;
}

.container {
  position: relative;
  background-color: #E01D2B;
  height: 180px;
  width: 600px;
  margin: auto;
  overflow: hidden;
}

.arrow {
  height: 100px;
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.arrow::after {
  display: block;
  background-color: white;
  width: 20px;
  height: 20px;
  bottom: 0;
  content: '';
  transform: translate(calc(var(--card-width) / -2), 50%) rotate(45deg);
}

.card {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(var(--card-width) + 40px);
  height: 110px;
  border-top-left-radius: 1em;
  background-color: #eee;
  transform: translate(34px) skewX(-30deg);
}
<div class = "container">
  <div class = "arrow"></div>
  <div class = "card"></div>
</div>

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

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

Моя нижняя граница не отображается при ширине экрана <700 пикселей. Как добавить пространство между нижней частью страницы и нижней границей?
Почему мои элементы двигаются при изменении положения с фиксированного на статическое?
Удаление последней части вертикальной линии границы в случае списка
Как я могу увеличить div, чтобы он соответствовал его содержимому, до максимального размера родительского контейнера?
Проблема с получением имени исполнителя с сайта Billboard Top 100 с использованием красивого супа
Почему заполнение желоба не отображается в одном из блоков контента моей веб-страницы Bootstrap и как это исправить?
Как ограничить количество выбранных в пользовательском меню выбора в javascript?
Th и td с цветом фона и цветом текста, не меняющим цвет фона при наведении?
Отправка контактной страницы формы
$(this).addClass для нескольких onclick='myfunction()'