CSS - пользовательский радиус элемента?

Я пытаюсь добавить настраиваемый радиус границы, как на этом главном изображении: https://www.magicleap.com/magic-leap-один

Я знаю, что это делает изображение, мой вопрос: могу ли я сделать что-то подобное с помощью CSS?

Для этого вам нужно будет использовать решение на основе изображений (например, SVG), одного чистого CSS будет недостаточно.

— 28.05.2019 06:49

Ваш эталонный сайт не имеет радиуса границы, это изображение. Вы можете создать изображение в формате SVG или PNG.

— 28.05.2019 07:28

css

28.05.2019 06:48

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

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

Ответы 1

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

Попробуйте это. Надеюсь, это то, что вы ищете.

body {
  margin: 0;
  padding: 0;
}

.block {
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(https://s1.kkday.com/images/product/8163/20170301045421_Nkoag.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  width: 100%;
  padding: 150px 0;
  text-align: center;
  border-bottom-left-radius: 100% 15%;
  border-bottom-right-radius: 100% 15%;
}

<div class = "block">
  <h1>
    Hello World!
  </h1>
</div>

28.05.2019 07:32

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

Почему добавление поля к моему div вытесняет его содержимое (столбцы) со страницы?

Как выровнять текст с изображением

Сохранение ширины элемента статической после удаления другого элемента, но при этом остающейся отзывчивой

Изменить стиль данных таблицы в скрытой строке таблицы при отображении строки таблицы

Z-индекс перевернут в iOS и Safari macOS

Кнопка Html Table занимает слишком много места

Как добавить поддержку RTL для Material UI React

Получить данные из json api, но не отображать их в таблице html

Можно ли отображать элементы flexbox в две строки вместо одной?

Как я могу создать заголовок без полей в pdf, созданном с помощью snappy twig (Symfony 4)?

CSS - пользовательский радиус элемента?

Ответы 1

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

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