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.

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

Голосов: 3, Средняя оценка: 5

Треугольники на CSS

25.04.2022

2019

1

/* Направленный вверх */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-bottom: 30px solid orange;
}

CSS

/* Направленный вниз */
span {
	display: inline-block;
	border: 30px solid transparent; 
	border-top: 30px solid orange;
}

CSS

/* Направленный влево */
span {
	display: inline-block;
	border: 30px solid transparent; 
	border-right: 30px solid orange;
}

CSS

/* Направленный вправо */
span {
	display: inline-block;
	border: 30px solid transparent; 
	border-left: 30px solid orange;
}

CSS

/* Левый верхний угол */
span {
	display: inline-block;
	border-top: 40px solid orange;
	border-right: 40px solid transparent;
}

CSS

/* Верхний правый угол */
span {
	display: inline-block;
	border-top: 40px solid orange;
	border-left: 40px solid transparent;
}

CSS

/* Нижний правый угол */
span {
	display: inline-block;
	border-bottom: 40px solid orange;
	border-left: 40px solid transparent;
}

CSS

/* Нижний левый угол */
span {
	display: inline-block;
	border-bottom: 40px solid orange;
	border-right: 40px solid transparent;
}

CSS

2

/* Направленный вверх */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-bottom: 30px solid orange;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -24px;
	left: -26px;
	border: 26px solid transparent;
	border-bottom: 26px solid #fff;
}

CSS

/* Направленный вниз */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-top: 30px solid orange;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -28px;
	left: -26px;
	border: 26px solid transparent;
	border-top: 26px solid #fff;
}

CSS

/* Направленный влево */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-right: 30px solid orange;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -26px;
	left: -24px;
	border: 26px solid transparent;
	border-right: 26px solid #fff;
}

CSS

/* Направленный вправо */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-left: 30px solid orange;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -26px;
	left: -28px;
	border: 26px solid transparent;
	border-left: 26px solid #fff;
}

CSS

/* Левый верхний угол */
span {
	display: inline-block;
	border-top: 40px solid orange;
	border-right: 40px solid transparent;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -38px;
	left: 2px;
	border-top: 33px solid #fff;
	border-right: 33px solid transparent;
}

CSS

/* Верхний правый угол */
span {
	display: inline-block;
	border-top: 40px solid orange;
	border-left: 40px solid transparent;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -38px;
	left: -35px;
	border-top: 33px solid #fff;
	border-left: 33px solid transparent;
}

CSS

/* Нижний правый угол */
span {
	display: inline-block;
	border-bottom: 40px solid orange;
	border-left: 40px solid transparent;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: -35px;
	border-bottom: 33px solid #fff;
	border-left: 33px solid transparent;
}

CSS

/* Нижний левый угол */
span {
	display: inline-block;
	border-bottom: 40px solid orange;
	border-right: 40px solid transparent;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 2px;
	border-bottom: 33px solid #fff;
	border-right: 33px solid transparent;
}

CSS

25. 04.2022

2019

#Background #Border #CSS

Другие публикации

Генерация счета на оплату PDF PHP

С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf — это конвертер HTML в PDF который…

Подменю в dropdown Bootstrap

Разработчики Bootstrap начиная с третьей версии удалили поддержку подменю из-за того, что им никто не пользуется и на мобильных эта функция не актуальна. Ниже представлены примеры как сделать…

Блокировка многократной отправки формы

Из-за отправки файла, медленного интернета или тормозящего браузера, пользователь может нажать кнопку отправки формы…

jQuery UI Slider

jQuery UI Slider – гибкий плагин, который позволяет создать элементы интерфейса в виде ползунков в различных вариантах.

Изображения границ CSS

❮ Предыдущая Далее ❯

Изображения границ CSS

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

Свойство CSS border-image

Свойство CSS border-image позволяет указать изображение, которое будет использоваться вместо обычной границы вокруг элемента.

Свойство состоит из трех частей:

1. Изображение для использования в качестве границы
2. Где разрезать изображение
3. Определите, должны ли средние части повторяться или растягиваться

Мы будем использовать следующее изображение (называемое «border.png»):

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

Примечание: Для граница изображения для работы элемент также нуждается в граница набор свойств!

Здесь средние части изображения повторяются для создания границы:

Изображение в качестве рамки!

Вот код:

Пример

#borderimg {
  граница: 10 пикселей сплошная прозрачная;
  отступ: 15 пикселей;
  изображение границы: url(border. png) 30 патронов;
}

Попробуйте сами »

Здесь средние части изображения растягиваются для создания границы:

Изображение в качестве рамки!

Вот код:

Пример

#borderimg {
  граница: 10 пикселей сплошная прозрачная;
отступ: 15 пикселей;
  изображение границы: url(border.png) 30 стрейч;
}

Попробуйте сами »

Совет: Свойство border-image на самом деле является сокращенным свойством свойства источник изображения границы , фрагмент изображения границы , ширина изображения границы , граница-изображение-начало и свойств border-image-repeat .

CSS border-image — Различные значения фрагмента

Различные значения фрагмента полностью изменяют внешний вид границы:

Пример 1:

border-image: url(border. png) 50 round;

Пример 2:

border-image: url(border.png) 20% округление;

Пример 3:

border-image: url(border.png) 30% округление;

Вот код:

Пример

#borderimg1 {
  граница: 10 пикселей сплошная прозрачная;
отступ: 15 пикселей;
  изображение границы: url(border.png) 50 патронов;
}

#borderimg2 {
граница: 10px сплошная прозрачная;
  отступ: 15 пикселей;
border-image: url(border.png) 20% округление;
}

#borderimg3 {
 граница: 10 пикселей сплошная прозрачная;
отступ: 15 пикселей;
  border-image: url(border.png) 30% круглый;
}

Попробуйте сами »

Проверьте себя с помощью упражнений

Упражнение:

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

<стиль>
дел {
  граница: 10px сплошная прозрачная;
  : url(border. png) 30 раундов;
}

<тело>
  
Это элемент div. Там есть текст.

 

Начать упражнение

Свойства изображения границы CSS

❮ Предыдущий Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Лучшие учебники

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

css — Размещение 4 html-элементов в каждом углу div

Привет и спасибо за помощь. У меня есть div (от 180 до 75 пикселей), в котором мне нужно разместить 3 абзаца и изображение. Теперь мне нужно разместить эти элементы во всех углах div. Это должно выглядеть примерно так -> (мне пока не разрешено публиковать картинки. Надеюсь, вы все равно это поймете.)

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

View post on imgur.com

Но сколько бы я ни играл с «display: inline-block» или «float», я не могу заставить его работать.

Надеюсь, кто-нибудь из вас может дать мне ответ?

 <дел>
    <дел>
      
Заголовок Заголовок
      
500 опыта