Css уголок у блока: Как с помощью CSS сделать угол на блоке? — Хабр Q&A

Всем привет! Раньше верстальщики практически все элементы дизайна вырезали в Фотошопе из PSD макета, в том числе и треугольники – маленькие и больше, – неважно. Просто не было возможности прописать их кодом. Сейчас HTML5 повелевает отрабатывать свои навыки в CSS3 и с его помощью создавать любую фигуру.

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

Итак, чтобы создать треугольник через CSS, понадобится свойство border, а также нулевая ширина и высота блока.

Для начала, в HTML файле создайте блок с классом одного из треугольников ниже, например:

 <div></div>

Затем в CSS файл скопируйте код с выбранным классом.

Треугольник вершиной вверх

.triangle-top {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid #f95959;
}

.triangle-bottom {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 200px solid #f95959;
}

 .triangle-left {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-right: 200px solid #5cb85c;
    border-bottom: 100px solid transparent;
}

. triangle-right {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-left: 200px solid #5cb85c;
    border-bottom: 100px solid transparent;
}

.triangle-top-left {
    width: 0;
    height: 0;
    border-top: 200px solid #f0ad4e;
    border-right: 200px solid transparent;
}

.triangle-top-right {
    width: 0;
    height: 0;
    border-top: 200px solid #f0ad4e;
    border-left: 200px solid transparent;
}

.triangle-bottom-left {
    width: 0;
    height: 0;
    border-bottom: 200px solid #5bc0de;
    border-right: 200px solid transparent;
}

.  triangle-bottom-right {
    width: 0;
    height: 0;
    border-bottom: 200px solid #5bc0de;
    border-left: 200px solid transparent;
}

Сначала непонятно, причем тут border.. но немного практики и все становится на свои места.

Для наглядности я сделала большие треугольники, а вы меняйте размер и цвет под себя.

Как много фигур можно создать с помощью CSS, для любителей кода это очень увлекательное занятие! А потом бы еще сделать анимацию… Буду развивать направление рисунков и анимации в CSS и JS.

Надеюсь, вам было интересно? 🙂 Пока!

border-top-right-radius | CSS | WebReference

Устанавливает радиус скругления правого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

Краткая информация

Синтаксис

border-top-right-radius: [<размер>| <проценты>] [<размер> | <проценты>]

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

Рис. 1. Радиус скругления для создания разных типов уголков

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div {
  background: #e4efc7;
  border: 1px solid #333;
  padding: 10px;
  border-top-right-radius: {{ playgroundValue }}px;
}

Пример

Рис. 2. Радиус скругления

Объектная модель

Объект.style.borderTopRightRadius

Примечание

Firefox до версии 4 использует свойство -moz-border-radius-topright.

Chrome до версии 4, Safari до версии 5 и Android до версии 2.1 используют свойство -webkit-border-top-right-radius.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

Базовый синтаксис	9	12	1	4	10. 5	3	5	1	4
Проценты	9	12	4		10.5	5		4
Эллиптические уголки	9	12	1		10.5	3		3.5

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Границы

См. также

• border-bottom-left-radius
• border-bottom-right-radius
• border-radius
• border-top-left-radius

Закругленные углы | HTML Собака

Закругленные углы раньше использовались для сужения сплошных фоновых изображений или, для гибких блоков, многочисленных фоновых изображений, по одному на угол, наложенных на несколько вложенных элементов div . Аргх, некрасиво. Ну, не больше. Теперь, с помощью простого CSS, вы можете добавить в дизайн больше изгибов, чем Мэрилин Монро.

Радиус границы?

Ага. Радиус границы. Однако не бойтесь — вам не обязательно иметь границы. 9Свойство 0005 border-radius можно использовать для добавления угла к каждому углу блока.

#мэрилин {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 20 пикселей; 
}
 

Вот и все. Закругленные углы, видите? Ну, да, если у вас толковый браузер (см. примечание ниже).

Конечно, если вы хотите рамку…

#ok_a_border_then {
    граница: 5px сплошная #8b2;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 5px; 
}
 

Упс.

Реклама здесь! На давно известном, хорошо читаемом и уважаемом ресурсе веб-разработки.

Несколько значений

border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius также можно использовать для нацеливания на определенные углы.

Еще немного менее ужасно многословный, вы также можете определить все радиусы углов (какое замечательное слово) индивидуально с помощью списка значений, разделенных пробелами, работая по часовой стрелке от верхнего левого угла, как и другие сокращенные свойства:

#монро {
    фон: #fff;
    ширина: 100 пикселей;
    высота: 100 пикселей;
      радиус границы: 6px 12px 18px 24px; 
}
 

Пышные.

Используя два значения вместо четырех, вы нацеливаете верхний левый и нижний правый с первой длиной (или процентом) и верхний правый + нижний левый со вторым. Три значения? Верхний левый, затем верхний правый + нижний левый, затем нижний правый. Сокрушительный.

Гах! Просто должны были быть проблемы с браузером, не так ли? Черт бы вас побрал, браузеры.

Internet Explorer версии 8 и ниже не поддерживает border-radius . Единственный способ справиться с этим — либо обойтись дизайном в тех браузерах, которые не имеют закругленных углов (большинство людей могут с этим смириться), либо вернуться к старым фоновым изображениям.

Вы также можете наткнуться на аналогичные проприетарные свойства, такие как -webkit-border-radius и -moz-border-radius , которые предназначены для старых, малоиспользуемых версий Safari и Firefox соответственно. Наш тщательно сформулированный профессиональный совет? К черту их.

Эллипсы

Круги для вас слишком квадратные? Вы можете указать разные горизонтальные и вертикальные радиусыiii, разделив значения знаком «/».

#нано {
        фон: #fff;
        ширина: 100 пикселей;
        высота: 150 пикселей;
          радиус границы: 50px/100px; 
        радиус нижнего левого края: 50 пикселей;
        граница-нижний-правый-радиус: 50px;
}
 

CSS { В реальной жизни }

Признание: я почти никогда не пишу border-radius как стенографию, в основном потому, что никогда не помню порядок. Мой мозг запоминает сокращенные обозначения полей и отступов (верхний, правый, нижний, левый), но когда дело доходит до углов, все обстоит иначе. Начать с верхнего левого угла или с верхнего правого? Поэтому я обычно прибегаю к сокращению, которое, по общему признанию, многословно, но, по крайней мере, имеет то преимущество, что является явным для меня и любых будущих читателей моего кода. Для справки, они эквивалентны:

 div { 
 радиус границы: 10% 20% 30% 75%; 
 } 
 div { 
 граница-верхний-левый-радиус: 10%; 
 граница-верхний-правый-радиус: 20%; 
 граница-нижний-правый-радиус: 30%; 
 граница-нижний-левый-радиус: 75%; 
 } 
 

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

По иронии судьбы, сам процесс написания этой статьи, вероятно, навсегда закрепит ее в моем мозгу.

Используя всего два значения в сокращении, мы можем установить как верхний левый и нижний правый радиусы (первое значение), так и верхний правый и нижний левый (второе значение).

Неравные радиусы

Немного сложнее, когда имеешь дело с неравными радиусами. Скажем, нам нужен верхний левый радиус, который выглядит более эллиптическим. Нам понадобится более длинный радиус границы вдоль верхнего края и более короткий на левом краю. Мы можем использовать два значения для свойства border-top-left-radius :

 div { 
 border-top-left-radius: 100% 5rem; 
 } 

Первое значение — это радиус в горизонтальном направлении, второе — в вертикальном направлении.

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

 div { 
 радиус границы: 2rem 8rem 8rem 9rem / 3rem 11rem 6rem 5rem; 
 } 

По сути, мы делаем два обхода вокруг нашего элемента по часовой стрелке.

Нам не нужно задавать каждый радиус в сокращении. Сокращение в этом примере эквивалентно установке всех вертикальных радиусов на 50%, при этом горизонтальные радиусы попеременно устанавливаются на 5rem и 2rem соответственно.

 /* Shortand */ 
 div { 
 border-radius: 5rem 2rem / 50%; 
 } 
 /* Эквивалент: */ 
 div { 
 border-top-left-radius: 5rem 50%; 
 border-top-right-radius: 2rem 50%; 
 граница-нижний-правый-радиус: 5rem 50%; 
 граница-нижний-левый-радиус: 2rem 50%; 
 } 
 

Логические свойства для радиуса границы

Если мы работаем с разными языками на нашем веб-сайте, мы можем захотеть, чтобы наши радиусы границ изменялись в соответствии с режимом письма или направлением нашего текста. Логические свойства дают нам относительно расхода значения. Например, для арабского текста, который пишется справа налево, радиусы границ, возможно, потребуется применить к левой стороне элемента, в то время как в европейских языках они будут применяться к правой. К счастью, есть логические эквиваленты свойств border-radius-.

Логические свойства обычно относятся к оси inline или block , которые различаются в зависимости от направления или режима записи. На английском языке, который пишется слева направо, встроенная ось относится к горизонтальной оси, а ось блока относится к вертикальной оси. начало встроенной оси будет слева, конец будет справа. В режиме вертикальной записи встроенная ось будет вертикальной осью, а ось блока будет горизонтальной.

Логические свойства радиуса границы относятся к началу и/или концу встроенной или блочной оси. Из всех логических свойств их, пожалуй, сложнее всего читать. Давайте сравним определение верхнего левого, верхнего правого, нижнего правого и нижнего левого радиусов и эквивалентов их логических свойств:

 div { 
 граница-верхний-левый-радиус: 5rem; 
 граница-верхний-правый-радиус: 2rem; 
 граница-нижний-правый-радиус: 4rem; 
 граница-нижний-левый-радиус: 3rem; 
 } 
 /* С логическими свойствами: */ 
 div { 
 border-start-start-radius: 5rem; 
 граница-начало-конец-радиус: 2rem; 
 граница-конец-конец-радиус: 4rem; 
 граница-конец-начало-радиус: 3rem; 
 } 
 

Привыкание к написанию border-start-start-radius — это, конечно, некий скачок в уме для меня! Написано так, потому что это начало блочной оси и начало встроенной оси, а border-start-end-radius относится к началу оси блока и концу встроенной оси и так далее.

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

См. перо Логический радиус границы от Мишель Баркер (@michellebarker) на КодПене.

Логические свойства и неравные радиусы

Несколько сбивает с толку, хотя имя свойства относится к оси блока, а затем к встроенной оси, значение радиуса записывается сначала как встроенная ось, а затем ось блока. Это делает его совместимым с порядком физических свойств (например, border-top-right-radius и border-start-end-radius будут относиться к одному и тому же углу, и порядок значений будет таким же), но все еще может быть запутанным! Я полагаю, что мы могли бы думать об этом, поскольку край блока — это тот, который обрабатывается округлением в первую очередь, несмотря на то, что он относится к горизонтальному радиусу.

Режимы вертикального письма

Вот интересная особенность: в режиме вертикального письма свойства логического радиуса границы ведут себя не совсем так, как я ожидал бы при использовании эллиптического радиуса границы (т. е. более одного значения). В этой демонстрации я применяю режим записи vertical-rl ко второму элементу.

 .wrapper { 
 режим письма: вертикальный-rl; 
 } 
 p { 
 граница-начало-начало-радиус: 10 бэр 1 бэр; 
 border-start-end-radius: 2rem 3rem; 
 граница-конец-конец-радиус: 8rem 4rem; 
 } 
 
 .wrapper:nth-child(2) { 
 режим записи: horizontal-tb; 
 } 
 

См. перо Логический радиус границы от Мишель Баркер (@michellebarker) на КодПене.

Как и следовало ожидать, верхний левый угол фактически становится верхним правым углом, поскольку элемент теперь расположен вертикально. Но вопреки тому, что я ожидал, два значения свойства меняются местами. Угол переходит от длинной неглубокой кривой вдоль края начала блока (край над текстом) к узкой глубокой кривой в режиме вертикального письма. Это меня удивило, так как я ожидал, что углы будут вести себя почти так же, как если бы я повернул элемент с помощью преобразования. Чтобы добиться желаемого внешнего вида, нам нужно поменять местами значения:

 .wrapper:nth-child(2) p { 
 /* Мы должны поменять местами значения, если хотим, чтобы они были логичными :( */ 
 border-start-start-radius: 1rem 10rem; 
 border-start- end-radius: 3rem 2rem; 
 border-end-end-radius: 4rem 8rem; 
 } 

Я не уверен, то ли я что-то недопонимаю в спецификации, то ли это баг (то что работает то же самое в Chrome и Firefox предполагает обратное), но мне это кажется нелогичным

Нет логического сокращения

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