Как сделать прямоугольник с закругленными краями в css

Создание улыбки/подкова/полукруг с закругленными краями в CSS

Я делаю некоторые анимации CSS с анимированным лицом ребенка, и я пытаюсь создать рот как особую форму улыбки. Мне нужна форма. Обратите внимание на верхние левые и правые края, которые закруглены:

Улыбка

Вы можете видеть ближайший, который я получил здесь. Единственное, чего не хватает, это закругленные верхние левые и правые края.

* Редактировать Представленные ответы пока недостаточно хороши, поэтому я, к сожалению, должен был использовать растровое изображение. Если кто-то найдет лучшее решение в будущем, предоставьте ответ, и я помечаю его как принятый, если он будет работать адекватно.

Создаем закруглённые уголки с помощью CSS 3

image

Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.

Кроссбраузерная совместимость.

К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 1.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).

Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.

Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами. Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome.

Для начала создадим простой блок, для которого мы и будем применять свойство border-radius.
<body>
<div ></div>
</body>

В CSS зададим для него высоту, ширину и цвет фона:
#box <
width:590px;
height:100px;
background-color:#6B86A6; >

Добавляем свойство border-radius:

Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:
#box <
-moz-border-radius: 20px;
>

Теперь все четыре угла будут иметь радиус 20px:
image

Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:
#box <
-moz-border-radius:20px 40px;
>

image

Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.
#box <
-moz-border-radius:10px 20px 30px 40px;
>

image

Объявляем свойство border-radius для каждого угла
  • moz-border-radius-topleft для верхнего левого угла;
  • moz-border-radius-topright для верхнего правго угла;
  • moz-border-radius-bottomright для нижнего правого угла;
  • moz-border-radius-bottomleft для нижнего левого угла;
Горизонтальный и вертикальный радиус

Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:
#box <
-moz-border-radius-topleft: 30px 15px;
>
image

Как Вы можете видеть на картинке верхний левый угол имеет немного «скошенный» вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса.

При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:
#box <
-moz-border-radius: 30px / 15px;
>
#box <
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
>

image

Использование свойства border-radius в Safari и Chrome.
  • -webkit-border-top-left-radius для верхнего левого угла;
  • -webkit-border-top-right-radius для верхнего правого угла;
  • -webkit-border-bottom-right-radius для нижнего правого угла;
  • -webkit-border-bottom-left-radius для нижнего левого угла;

Этот код не будет работать в Safari и Chrome:
#box <
-webkit-border-radius: 10px 20px 30px 40px;
>

Правильный код будет выглядеть так:
#box <
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
>

Горизонтальный и вертикальный радиус в Safari и Chrome.

В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:
#box <
-webkit-border-top-left-radius: 30px 15px;
>

При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:
#box <
-webkit-border-radius: 30px 15px;
>

CSS фигур, прямоугольник с кривыми прямоугольными краями

нужна помощь в создании фигур выше с изогнутыми прямоугольными изображениями вставки angles. to внутри я могу это сделать . может кто-нибудь мне помочь. пожалуйста.

enter image description here

Я попытался использовать border-radius, чтобы выборочно выбрать край, который я хочу прямоугольным

1 ответ

Возможные Дубликаты : css/ html помощь в создании округлого стола, подобного контейнеру Как лучше всего создать закругленные углы с помощью CSS? как сделать прямоугольник/квадрат с изогнутыми краями в html?

Я могу создать фигуру, которая представляет собой прямоугольник со всеми закругленными краями. Однако то, что я хочу, — это прямоугольная форма с закругленными только 2 краями. Возможно ли это? По сути, я взламываю ListView, который выглядит как пузырь с закругленными краями. Я хочу добавить.

Я бы использовал какой-нибудь псевдоэлемент и одно и то же фоновое изображение дважды.

Вот пример (отсутствует только одна кривая) :

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

Учитывая изображение, есть ли способ смягчить края с помощью css? Или через какую-нибудь библиотеку js (хотя css было бы предпочтительнее)? Идея заключается в том, что края изображения должны.

У меня есть несколько фигур на холсте. Мне нужно создать ограничивающий прямоугольник вокруг всех выбранных фигур, не изменяя их существующего положения, а также я должен иметь возможность изменять.

Привет всем , я работаю над приложением ipad, использующим cocos2d objective c и box2d. мой вопрос связан с box2d и столкновениями с кривыми. в основном у меня есть круги внутри более широкой.

Возможные Дубликаты : css/ html помощь в создании округлого стола, подобного контейнеру Как лучше всего создать закругленные углы с помощью CSS? как сделать прямоугольник/квадрат с изогнутыми краями.

Я могу создать фигуру, которая представляет собой прямоугольник со всеми закругленными краями. Однако то, что я хочу, — это прямоугольная форма с закругленными только 2 краями. Возможно ли это? По.

В то время как я знаком с переопределением метода Swing paintComponent (Graphics g) и рисованием пользовательских фигур, я бы изо всех сил пытался нарисовать прямоугольник с некоторыми обратными.

Как я могу сделать подчеркивание с угловыми краями в CSS, как показано на рисунке ниже? Спасибо вам за любую помощь.

Я хочу создать прямоугольник с круглыми краями с градиентной границей цвета Stripes . Я хочу использовать тег img или тег div , чтобы включить изображение и полосатую границу градиента. Вот как это.

Мне нужна помощь в создании пользовательских фигур в Actionscript 2, я хочу создать закругленный прямоугольник, используя только код.. Я хочу иметь возможность указать, сколько кривой я хочу на.

Я понимаю, что tensorflow API для обучения пользовательских наборов данных обнаружения объектов использует только прямоугольные ограничительные рамки, а именно xmin, xmax, ymax, ymin. Я также.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *