Геометрические фигуры css: Геометрические фигуры на CSS / Хабр

Содержание

Создаем геометрические фигуры с помощью CSS

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

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

В сегодняшнем уроке мы создадим геометрические фигуры, используя только свойства CSS3.

  • Знание CSS3;
  • Время и внимание.

Скачать исходные файлы
Просмотреть демонстрацию


HTML
Для создания окружности с помощью CSS, во-первых, мы будем использовать тег div. Именуем его ID именем фигуры. Итак, в первом примере, ID будет равно Circle:

CSS
Что касается CSS, просто задаем значения width и height, а затем задаем значение border radius, равное половине от width и height:

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}


HTML
Чтобы создать квадрат в CSS, как и в примере с окружностью, мы создаем div с идентификатором square. Итак, ниже приведен код для блока div:

CSS
Для создания квадрата в CSS, просто задаем значения width и height равные друг другу:

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}


HTML
Чтобы создать прямоугольную форму, в CSS, как и в случае с квадратом, настраиваем div, где ID равно rectangle:

<div></div>

CSS
Так же, как и в случае с квадратом, мы зададим значения width и height, но на этот раз width будет больше, чем height:

#rectangle {
    width: 220px;
    height: 120px;
    background: #4da1f7;
}


HTML
Для создания овала в CSS, создаем div с ID равным oval:

CSS
Овал похож на окружность; овал это прямоугольная форма с заданным радиусом, равным половине значения height:

#oval {
    width: 200px;
    height: 100px;
    background: #e9337c;
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}


HTML
И снова, для создания треугольника с помощью CSS, делаем div с ID равным triangle.

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

#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}


HTML
Создаем перевернутый треугольник с помощью CSS. Снова создаем div. ID равно triangle_down:

<div></div>

CSS
Создавая перевернутый треугольник, оперируем толщиной границы:

#triangle_down {
    width: 0;
    height: 0;
    border-top: 140px solid #20a3bf;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}


HTML
Для создания треугольной фигуры, которая смотрит влево, снова создаем div с ID triangle_left:

<div></div>

CSS
Создавая треугольник, направленный влево, оперируем свойствами границ правой стороны треугольника:

#triangle_left {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 140px solid #6bbf20;
    border-bottom: 70px solid transparent;
}


HTML
Для создания треугольной фигуры, которая смотрит вправо, создаем div с ID triangle_right:

<div></div>

CSS
Создавая треугольник, направленный вправо, оперируем свойствами границ правой стороны треугольника:

#triangle_right {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 140px solid #ff5a00;
    border-bottom: 70px solid transparent;
}

Блоки из фигур на CSS

.block-figure-3 * {

    box-sizing: border-box;

}    

.block-figure-3 {

    margin: 20px auto;

    padding: 0;

    position: relative;

    max-width: 600px;

    width: 100%;

    overflow: hidden;

}

.block-figure-3 .figure-txt {

    border: 6px solid #BFE2FF;

}

.block-figure-3 .image-wrap {

    border: 6px solid #BFE2FF;

    border-radius: 100%;

    width: 200px;

    height: 200px;

    position: absolute;

    top: 30px;

    background: #FFF;

    z-index: 1;

    right: 0;

}

.block-figure-3 .image-lay {

    width: 100px;

    height: 200px;

    position: absolute;

    top: -6px;

    background: #FFF;

    z-index: 2;

    right: -6px;

}

.block-figure-3 .image {

    transform-style: preserve-3d;

    perspective: 1000px;

    border-radius: 50%;

    position: absolute;

    z-index: 3;

    height: 176px;

    width: 176px;

    top: 6px;

    right: 6px;

}

.block-figure-3 .front,

.block-figure-3 .back {

    background-size: cover;

    background-position: center;

    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

    backface-visibility: hidden;

    text-align: center;

    border-radius: 50%;

    color: #fff;

    height: 176px;

    width: 176px;    

    border: 6px solid #BFE2FF;    

    position: absolute;

}

.block-figure-3 .inner {

    transform: translateY(-50%) translateZ(60px);

    top: 50%;

    position: absolute;

    margin: auto;

    z-index: 4;

    width: 100%;

}

.block-figure-3 .image .back{

    transform: rotateY(180deg);

    transform-style: preserve-3d;

}

.block-figure-3:hover .back{

    transform: rotateY(0deg);

    transform-style: preserve-3d;

}

.block-figure-3:hover .front{

    transform: rotateY(-180deg);

    transform-style: preserve-3d;

}

.block-figure-3 .inner a {

    font-weight: bold;

    font-family: Verdana, sans-serif;

    text-transform: uppercase;

    text-decoration: none;

    color: #337AB7;

    text-align: center;

    margin: auto;

    display:block;

    font-size: 14px;

    line-height: 130px;

    height: 142px;

    width: 142px;

    border:6px solid #BFE2FF;

    border-radius: 50%;

    transition:all .6s ease-in-out;

    overflow:hidden;    

}

.block-figure-3 .inner a::before{

    content:»;

    position:absolute;

    top:-12px;

    margin:auto;

    display:block;

    border-radius:50%;

    width:166px;

    height:166px;

    left:-1px;

    transition:box-shadow .6s ease-in-out;

    z-index:-1;

}

.block-figure-3 .inner a:hover{

    color:#fff;

}

.block-figure-3 .inner a:hover::before{

    box-shadow: inset 0 0 0 166px #337AB7;

}

 

.block-figure-3 .figure-txt {

    position: relative;

    z-index: 1;

    padding: 10px 20px;

    margin-right: 100px;

    min-height: 260px;

}

.block-figure-3 .figure-txt h4 {  

    text-transform: uppercase;

    color: #337AB7;

    font-weight: bold;

    font-family: Verdana, sans-serif;

    font-size: 20px;

    margin: 6px 100px 12px 0;    

}

.block-figure-3 .figure-txt p {

    font-family: Verdana, sans-serif;

    font-size: 16px;

    margin: 10px 100px 10px 0;

}

@media (max-width: 560px) {

    .block-figure-3 .figure-txt,

    .block-figure-3 .figure-txt h4,

    .block-figure-3 .figure-txt p {

        margin-right: 0;

    }

    .block-figure-3 .figure-txt {

        min-height: auto;

        border-bottom: none;

    }

    .block-figure-3 .image-lay {

        display: none;

    }

    .block-figure-3 .image-wrap {

        border: 6px solid #BFE2FF;

        border-top: none;

        border-radius: 0;

        width: 100%;

        height: 160px;

        position: static;

    }  

    .block-figure-3 .image {

        border-radius: 0;

        position: static;

        height: 160px;

        width: 100%;

    }

    .block-figure-3 .front,

    .block-figure-3 .back {

        height: 154px;

        width: 100%;

        position: static;

        border-radius: 0;

        border: none;

    }

    .block-figure-3 .inner {

        transform: translateY(-100%) translateZ(60px);

        top: -6px;

    }

    .block-figure-3 .inner a::before{

        display: none;

    }

    .block-figure-3 .inner a:hover{

        color:#000;

    }

}

Геометрические фигуры

Используйте этот инструмент для создания геометрических фигур с помощью HTML и CSS. Он позволяет создавать необходимые вам фигуры и выбрать для них цвета.

Инструмент Геометрические фигуры дает возможность установить ширину, высоту, радиус, повернуть и сдвинуть для получения необходимой формы. Другой инструмент, Селектор цвета, поможет выбрать цвет в формате hex. Он мгновенно создает форму, основываясь на заданных значениях.

Данный инструмент обеспечивает следующие формы: прямоугольник, круг, треугольник, параллелограмм, сердце, луна, Pac-Man и Pair Point Burst.

Кроме того, W3docs имеет учебник CSS, с помощью которого вы сможете изучить свойства CSS. Узнайте больше о свойствах Width, Height, Border-radius и Color на нашем сайте.

Что такое форма?

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

Формы в веб-дизайне.

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

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

Формы — это больше, чем группа соединенных линий. Они могут вызвать много эмоций и иметь огромное влияние на сайт. Цвета также повышают степень вовлеченности пользователей, заставляя им чаще посещать ваш сайт. Комбинация некоторых форм и цветов уже имеет определенную коннотацию в нашем подсознании. Например, желтый круг символизирует солнце, а полукруг ассоциируется с полумесяцем. Или же, формы круга вызывают эмоции любви, доброты, заботы, поддержки, искренности и безупречности. Форма круга привлекает внимание пользователей. Круг не имеет начала и конца, и в каждой культуре символизирует солнце, планету, луну и другие небесные объекты. Он символизирует целостность. Эта форма также символизирует грациозность и женственность. Она дает чувство любви и комфорта. Форма круга внушает чувство безопасности и привязанности.

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

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

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

Треугольники представляют динамическое напряжение, действие и агрессию. О

SVG-фигуры и трансформации • Про CSS

← Начало про SVG

Писать SVG руками довольно просто. Используем фигуры: rect, polygon, circle, ellipse, а также line, polyline и path. Задаем выбранную фигуру, определяем её размеры и координаты, затем добавляем фон и обводку.

Следует отметить, что писать код руками совершенно не обязательно: с этим гораздо лучше справятся векторные редакторы, например, мощный, но платный Adobe Illustrator, бесплатный, но не такой удобный Inkscape, немного платный, но довольно симпатичный Sketch. Но имеет смысл хотя бы попробовать, потому что это а) интересно, б) полезно: навыки могут пригодиться, если надо нарисовать что-то простое, подправить код в отсутствие векторного редактора или вы хотите взаимодействовать с SVG через JavaScript.

Размеры и координаты задаются для разных фигур по-разному, а вот фон и обводка — одинаковы для всех:

fill — заливка. Можно задать цвет любым способом. Прозрачность — none или transparent. Цвет по умолчанию — черный;

stroke — цвет обводки;

stroke-width — толщина обводки, по умолчанию — 1. Без stroke не работает.

Больше параметров можно найти в спецификации w3.org/TR/SVG/painting.html#StrokeProperties.

Ниже можно увидеть примеры простых SVG-фигур и трансформации, которые к ним можно применить.

Rect

<svg>
  <rect x="5" y="5"
    fill="skyblue" stroke="steelblue" stroke-width="5"
  />
</svg>

x,y — координаты левого верхнего угла фигуры; width, height — ширина и высота прямоугольника.

Закругленные уголки задаются параметрами rx и ry. Если задан только один из параметров, скругление по вертикали и по горизонтали будет одинаковым:

<svg>
  <rect x="5" y="5" rx="20"
    fill="yellowgreen" stroke="green" stroke-width="5"
  />
</svg>

Если заданы оба параметра (и они таки разные), радиус скругления будет разным:

<svg>
  <rect x="5" y="5" rx="10" ry="50"
    fill="khaki" stroke="darkkhaki" stroke-width="5"
  />
</svg>

Polygon

<svg>
  <polygon points="5,135 115,5 225,135"
    fill="violet" stroke="purple" stroke-width="5"
  />
</svg>
<svg>
  <polygon
    points="70,5 90,41 136,48 103,80 111,126 70,105 29,126 36,80 5,48 48,41"
    fill="turquoise" stroke="lightseagreen" stroke-width="5"
  />
</svg>

В points задаются x,y-координаты вершин фигуры, через пробел.

polygon замыкается сам по себе, последнюю точку можно не указывать.

Circle

<svg>
  <circle r="65" cx="70" cy="70"
    fill="orangered" stroke="crimson" stroke-width="5"
  />
</svg>

r — радиус круга; cx, cy — координаты центра круга.

<svg>
  <ellipse rx="110" ry="60" cx="115" cy="70"
    fill="gold" stroke="orange" stroke-width="5"
  />
</svg>

rx, ry — горизонтальный и вертикальный радиусы эллипса; cx, cy — координаты центра эллипса.

Более сложные фигуры можно сделать из сочетания простых:

При этом стиль фигур можно задать один раз для всей группы, а не отдельно для каждой фигуры:

<svg>
  <g fill="#333">
    <ellipse rx="45" ry="37" cx="55" cy="60" transform="rotate(-45, 55, 55)"/>
    <ellipse rx="45" ry="37" cx="190" cy="60" transform="rotate(45, 190, 55)"/>
    <circle r="67" cx="122" cy="125"/>
  </g>
</svg>

Также можно рисовать простыми линиями.

Line

<svg>
  <line
    x1="220" y1="10" x2="20" y2="130"
    stroke="violet" stroke-width="5"
  />
</svg>

x1, y1, x2, y2 — координаты начала и конца линии.

Polyline

<svg>
  <polyline
    points="5,135 30,5 55,135 80,5, 105,135 130,5, 155,135 180,5, 205,135 230,5, 255,135"
    fill="none" stroke="orangered" stroke-width="5"
  />
</svg>

В points задаются x,y-координаты точек, каждая точка через пробел.

Для более сложных линий и фигур существует тег path, но эту тему стоит рассмотреть отдельно.

Transform

SVG-фигуры можно видоизменять с помощью свойства transform.

Возможные значения: translate, scale, rotate, skewX, skewY, matrix.

Пример:

<svg>
  <ellipse rx="110" ry="30" cx="115" cy="70"
    fill="gold" stroke="orange" stroke-width="5"
    transform="rotate(-23 115 70)"/> 
</svg>

Можно задавать несколько трансформаций через запятую или через пробел.

translate(tx [ty])

Если второй параметр не задан, он равен 0.

scale(sx [sy])

Если второй параметр не задан, он равен первому.

rotate(rotate-angle [cx cy])

Если координаты центра поворота не заданы, они равны 0 0 — это левый верхний угол SVG-изображения.

skewX(skew-angle), skewY(skew-angle)

matrix(a b c d e f)

Рисуем различные фигуры CSS

Первым в списке будет квадрат — разметка предельно просто, потребуется всего один блок и несколько строчек css


html:
<div></div>

css:
.square {
    width: 100px;
    height: 100px;
    background: #cc0000;
}

Меняя значения размеров и цвет фона блока рисуем квадрат нужного размера

Пример того, что должно получиться:

Как из квадрата получить прямоугольник, я думаю, объяснять нет нужды, а вот нарисовать круг, к сожалению, без свойства css3 border-radius не получится.


html:
<div></div>

css:
.circle {
    width: 100px;
    height: 100px;
    background: #cc0000;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
Пример того, что должно получиться:

Немного изменив значения css свойств можем получить из круга овал.


html:
<div></div>

css:
.ellipse {
    width: 200px;
    height: 100px;
    background: #cc0000;
    -moz-border-radius: 100px/50px;
    -webkit-border-radius:  100px/50px;
    border-radius:  100px/50px;
}
Пример того, что должно получиться:

К сожалению, получить круг и овал в IE 7-8 без хаков не получится. Следует так же учитывать, что чем мельче элемент, тем хуже сглаживание по краям.

Следующий подопытный в нашем списке — треугольник.


html:
<div></div>

css:
.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;;
}
Пример того, что должно получиться:

Манипулируя значениями свойств css можно получить довольно причудливые формы треугольников. Обращаю внимание — цвет бордера должен задаваться для большей стороны. Ну и опять же, чем мельче элемент, тем хуже сглаживание по краям, но в отличии от круга и овала работает в ИЕ.

Создание идеальных адаптивных фигур с помощью единицы измерения CSS vw

Так как верстка страниц становится все более сложной, разработчикам требуется доступ к большему количеству единиц измерений, чтобы воплотить дизайн в жизнь. Кроме привычных процентов, em и rem, и пикселей существуют более новые единицы измерения vw и vh, и родственные им vmin и vmax, предоставляющие более мощные способы создания адаптивного дизайна, которые нередко могут помочь отказаться от использования точек перехода @media.

 

Выходим за пределы использования процентов

Традиционные единицы измерения CSS создают следующие проблемы в веб-дизайне:

  • Единица измерения процент не всегда работает, как ожидается. Разработчикам приходится помнить о внешних отступах, задавая размеры элементам. Не следует использовать единицу измерения процент для задания высоты элементу body. Запись font-size: 50% задает тексту размер, равный половине его стандартного размера, а не устанавливает зависимость между размером текста и размером содержащего его элемента.
  • Почти невозможно создавать фигуры идеальной формы для разных размеров окна браузера. Очень сложно добиться того, чтобы элемент был идеально квадратным и в то же время адаптивным.

Единицы измерения vw и vh в значительной мере решают все эти проблемы.

Поддерживание идеальных пропорций

С помощью единиц измерения vw и vh очень легко создать идеальные фигуры на веб-страницах. Эти единицы измерения можно использовать для задания значений размеров почти всех свойств CSS. Поэтому если нужно создать элемент, который при любых размерах окна браузера занимает 20% его ширины и при этом остается квадратным, нужно задать одинаковые значения свойствам ширины и высоты, используя единицу измерения vw:

 

div.twentysquare {
        background: #999;
        width: 20vw;
        height: 20vw;
}

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

Используя тот же способ, можно легко создать прямоугольник, высота которого вдвое больше его ширины при любых размерах окна браузера:

 

div.onetworect {
        width: 20vw; height: 40vw;
}

Задать баннеру идеальное соотношение размеров очень просто с помощью следующего кода CSS:

 

div.goldenrect {
        width: 100vw;
        height: 61.8vw;
        background: red;
}

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

Геометрических изображений

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

Инструмент

Geometric Images Tool позволяет вам установить ширину, высоту, радиус, поворот и наклон, чтобы получить точную форму, которую вы хотите. Существует также инструмент выбора цвета, который может помочь вам выбрать желаемый цвет в шестнадцатеричном формате. Инструмент сразу создает форму на основе заданных значений.

Инструмент

Geometric Images Tool предоставляет следующие формы: прямоугольник, круг, треугольник, параллелограмм, сердце, Pac-Man, пара точек и луна.

Кроме того, в W3docs есть книга по CSS, которая поможет вам изучить свойства CSS. Вы можете узнать о свойствах Ширина, Высота, Радиус границы и Цвет на нашем веб-сайте.

Что такое форма?

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

Фигуры в веб-дизайне.

Если вы хотите сделать свой сайт привлекательным, вам следует сосредоточиться на каждой детали его дизайна. Контент веб-сайта — самая важная часть, потому что чем интереснее контент, тем больше людей будет приходить на ваш сайт.Однако фигуры также играют важную роль в веб-дизайне параллельно с контентом.

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

Фигуры — это больше, чем просто группа соединенных линий. Они могут вызывать множество чувств и иметь большое влияние на сайт. Цвета также могут повысить заинтересованность пользователей и заставить их чаще посещать ваш сайт.Комбинация определенных форм и цветов уже имеет определенный оттенок в нашем подсознании. Например, желтый круг представляет солнце, а желтый полукруг представляет собой полумесяц. Например, круглые формы вызывают чувство любви, нежности, заботы, поддержки, целостности и совершенства. Круги помогают привлечь внимание пользователей. Круги не имеют начала и конца, и в каждой культуре они представляют солнце, землю, луну, вселенную и другие небесные объекты между ними. Они символизируют завершенность.Круги изящны, а их изгибы считаются женственными. Они теплые, успокаивающие и дарят чувство чувственности и любви. Их движение предполагает энергию и мощь. Они предлагают безопасность и связь.

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

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

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

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

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

.

HTML Геометрические фигуры ⋆ Адаптивное. Меню

9000TA3 000 9000 9000 9000 9000 С ВЕРТИКАЛЬНЫМ ЗАЛИВОМ ЗАПОЛНЕНИЕ ТРАНСФОРМАЦИИ 9000 9000 9000 9000 9000 000 000 000 0004000500040005 00050005000500050005 25AF 0005 000 000 000 000 000 000 БЕЛЫЙ ТРЕУГОЛЬНИК, УПРАВЛЯЮЩИЙ ВВЕРХ

4 25B7

4 25B7 БЕЛЫЙ ТРЕУГОЛЬНИК

000 000 000 000 000 ЧЕРНЫЙ УКАЗАТЕЛЬ 000 2522 ТРЕУГОЛЬНИК 2522 ТРЕУГОЛЬНИК 2522 000 ЛЕВЫЙ ТРЕУГОЛЬНИК 90 022 ТРЕУГОЛЬНИК 94 000 000 000 000 000 000 000 АЛМАЗ 00050005 БЕЛЫЙ 000 000 000 000 9 0004 & loz; 000 000 000 000 000 ЧЕРНЫЙ КРУГ 000 000 000 ЛЕВАЯ ПОЛОВИНА ЧЕРНАЯ 900 900 04 ◔ 000 9000 9000 9000 9000 000 ИНВЕРСИЯ БЕЛЫЙ КРУГ ◜ L0005 25DF BLACK 000 ЧЕРНЫЙ С ЛЕВЫМ

23

БЕЛЫЙ БЕЛЫЙ КВАДРАТ 9715 000 9004 НИЖНИЙ ЛЕВЫЙ КВАДРАНТ 0004 923 БЕЛЫЙ ТРЕУГОЛЬНИК 9004 000 000 КВАДРАТ
Отображаемый символ Десятичный Шестнадцатеричный Объект Имя
9632 9632 25QU4000
25A1 БЕЛАЯ ПЛОЩАДЬ
9634 25A2 БЕЛАЯ ПЛОЩАДЬ С ЗАКРУГЛЕННЫМИ УГЛАМИ
000 000 9634 000 000 000 9636 25A4 КВАДРАТ С ГОРИЗОНТАЛЬНЫМ ЗАЛИВОМ
9637 25A5 КВАДРАТ С ВЕРТИКАЛЬНЫМ ЗАПОЛНИТЕЛЕМ 000 9000 9000
9639 25A7 ПЛОЩАДЬ С ВЕРХНИМ ЛЕВЫМ К ПРАВОЙ НИЖНЕЙ ЗАЛИВЕ
9640 25A8 КВАДРАТ С ВЕРХНИМ СПРАВОМ К НИЖНЕМУ ЛЕВОМУ ЗАЛИВУ КВАДРАТ С ДИАГОНАЛЬНОЙ ЗАПОЛНЕНИЕМ КРЕСТОВИНЫ
9642 25AA ЧЕРНЫЙ МАЛЫЙ КВАДРАТ
9643 9643 9643 25AC ЧЕРНЫЙ ПРЯМОУГОЛЬНИК
9645 25AD БЕЛЫЙ ПРЯМОУГОЛЬНИК
9646 25 000 БЕЛЫЙ ВЕРТИКАЛЬНЫЙ ПРЯМОУГОЛЬНИК
9648 25B0 ЧЕРНАЯ ПАРАЛЛЕЛОГРАММА
9649 25B1 БЕЛЫЙ ПАРАЛЛЕЛОГРАММА
9651 25B3 БЕЛЫЙ ТРЕУГОЛЬНИК, УПРАВЛЯЮЩИЙ ВВЕРХ
9652 25B4 ЧЕРНЫЙ ВВЕРХ, УКАЗЫВАЮЩИЙ ВЕРХНИЙ ТРЕУГОЛЬНИК
9654 25B6 ЧЕРНЫЙ ТРЕУГОЛЬНИК ВПРАВО
9655 9656 25B8 ЧЕРНЫЙ МАЛЕНЬКИЙ ТРЕУГОЛЬНИК, НАПРАВЛЯЮЩИЙ ВПРАВО
9657 25B9 БЕЛЫЙ, УКАЗЫВАЮЩИЙ ВПРАВО МАЛЕНЬКИЙ ТРЕУГОЛЬНИК
9658 25BA
БЕЛЫЙ УКАЗАТЕЛЬ ВПРАВО
9660 25BC ЧЕРНЫЙ ТРЕУГОЛЬНИК ВНИЗ
9662 25BE МАЛЫЙ ТРЕУГОЛЬНИК, УКАЗЫВАЮЩИЙ ЧЕРНЫЙ ВНИЗ
000 9663 25BF БЕЛЫЙ УКАЗАТЕЛЬ ВНИЗ 9000 9000 9000 9000
9665 25C1 БЕЛЫЙ ТРЕУГОЛЬНИК ВЛЕВО
9666 25C2 ЧЕРНЫЙ НАПРАВЛЯЮЩИЙ ВЛЕВО МАЛЕНЬКИЙ ТРЕУГОЛЬНИК
9667 9667 9668 25C4 ЧЕРНЫЙ ЛЕВЫЙ УКАЗАТЕЛЬ
25C5 БЕЛЫЙ ЛЕВЫЙ ЛЕВЫЙ УКАЗАТЕЛЬ
9671 25C7 БЕЛЫЙ АЛМАЗ
9672 25C8 25C8 ДИАМЕТР БЕЛЫЙ БЕЛЫЙ ДИАМОН БЕЛЫЙ БЕЛЫЙ FISHEYE
9674 25CA LOZENGE
9675 25CB БЕЛЫЙ КРУГ
9676 25CC CLE000
CLE000
000 000 000 С ВЕРТИКАЛЬНЫМ ЗАПОЛНЕНИЕМ
9678 25CE BULLSEYE
9679 25CF
9681 25D1 КРУГ С ПРАВОЙ ПОЛОВИНОЙ ЧЕРНЫЙ
9682 25D2 25D2 25D2 25D2 25D3 КРУГ С ВЕРХНЕЙ ПОЛОВИНКОЙ ЧЕРНЫЙ
9684 25D4 КРУГ С ВЕРХНИМ ПРАВОМ КВАДРАНТОМ ЧЕРНЫЙ
9685 25D5 КРУГ С ВСЕМ ЗАДНИМ ЦЕПИ 000 ЛЕВАЯ ПОЛОВИНА ЧЕРНЫЙ КРУГ
9687 25D7 ПРАВАЯ ПОЛОВИНА ЧЕРНЫЙ КРУГ
9684000 9685 25D9 ОБРАТНЫЙ БЕЛЫЙ КРУГ
9690 25DA ВЕРХНЯЯ ПОЛОВИНА ОБРАТНЫЙ БЕЛЫЙ КРУГ
9691 9692 25DC ВЕРХНИЙ ЛЕВЫЙ Квадрантный контур R ARC
9693 25DD ВЕРХНИЙ ПРАВОЙ КРУГЛЫЙ КРУГЛЫЙ ДУГА
9694 25DE

4

25DE НИЖНЯЯ ЛЕВАЯ КВАДРАНТНАЯ КРУГОВАЯ ДУГА
9696 25E0 ВЕРХНЯЯ ПОЛОВИНА КРУГ
000 000 000 000 000 000 9698 25E2 ЧЕРНЫЙ НИЖНИЙ ПРАВЫЙ ТРЕУГОЛЬНИК
9699 25E3 ЧЕРНЫЙ НИЖНИЙ ЛЕВЫЙ ТРЕУГОЛЬНИК
◤ 14 9701 25E5 ЧЕРНЫЙ ВЕРХНИЙ R IGHT TRIANGLE
9702 25E6 БЕЛЫЙ БУЛЛЕТ
9703 25E7 000 000 000 000 970 000 000 000 970 000 КВАДРАТ С ПРАВОЙ ПОЛОВИНКОЙ ЧЕРНЫЙ
9705 25E9 КВАДРАТ С ВЕРХНИМ ЛЕВЫМ ДИАГОНАЛЬНЫМ ПОЛОВИНОЙ ЧЕРНЫЙ
9706ARE
9707 25EB БЕЛАЯ ПЛОЩАДЬ С ВЕРТИКАЛЬНОЙ БИССЕКЦИОННОЙ ЛИНИЕЙ
9708 25EC БЕЛЫЙ ТРЕУГОЛЬНИК С ТРЕУГОЛЬНИКОМ ВЕРХНИЙ ТРЕУГОЛЬНИК С ЛЕВОЙ ПОЛОВИНКОЙ ЧЕРНЫЙ
9710 25EE ВЕРХНИЙ ТРЕУГОЛЬНИК С ПРАВОЙ ПОЛОВИНОЙ ЧЕРНЫЙ
9711 25EF БОЛЬШОЙ КРУГ
000 000
ВЕРХНИЙ ЛЕВЫЙ КВАДРАНТ
9713 25F1 БЕЛЫЙ КВАДРАНТ С НИЖНИМ ЛЕВЫМ КВАДРАНТОМ
9714
25F3 БЕЛЫЙ КВАДРАТ С ВЕРХНИМ ПРАВЫМ КВАДРАНТОМ
9716 25F4 БЕЛЫЙ КРУГ С ВЕРХНИМ ЛЕВЫМ КВАДРАНТОМ
9718 25F 6 БЕЛЫЙ КРУГ С ПРАВЫМ НИЖНИМ КВАДРАНТОМ
9719 25F7 БЕЛЫЙ КРУГ С ВЕРХНИМ ПРАВЫМ КВАДРАНТОМ
25
25
9721 25F9 ВЕРХНИЙ ПРАВЫЙ ТРЕУГОЛЬНИК
9722 25FA НИЖНИЙ ЛЕВЫЙ ТРЕУГОЛЬНИК
94000
9724 25FC ЧЕРНЫЙ СРЕДНИЙ КВАДРАТ
9725 25FD БЕЛЫЙ СРЕДНИЙ МАЛЕНЬКИЙ КВАДРАТ
9727 25FF 90 005 ТРЕУГОЛЬНИК ПРАВЫЙ НИЖНИЙ
.

HTML Unicode UTF-8

9637 СЛЕВА НА НИЖНИЙ СПРАВО ЗАПОЛНЕНИЕ 900 16 ▨ 25AA 9645 9647 800017 7 167

7

7

90 016 B ВСЕХ 25D8
Char декабрь шестнадцатеричный Организация Имя
9632 25A0 ЧЕРНЫЙ КВАДРАТ
9633 25A1 БЕЛЫЙ КВАДРАТ
9634 25A 9634 25A С закругленными углами
9635 25A3 БЕЛЫЙ КВАДРАТ, СОДЕРЖАЩИЙ ЧЕРНЫЙ МАЛЕНЬКИЙ КВАДРАТ
9636 25A4 КВАДРАТ
КВАДРАТ
КВАДРАТ
25A5 КВАДРАТ С ВЕРТИКАЛЬНЫМ НАПОЛНЕНИЕМ
9638 25A6 КВАДРАТ С ОРТОГОНАЛЬНОЙ НАПОЛНИТЕЛЬНОЙ НАПРАВЛЯЮЩЕЙ НАПРЯЖЕНИЕМ
9639
9640 25A8 ПЛОЩАДЬ С ВЕРХНИМ ПРАВО НА НИЖНИЙ ЛЕВЫЙ ЗАЛИВ
9641 25A9 КВАДРАТ С ДИАГОНАЛЬНОЙ ЗАПОЛНЕНИЕМ ДВИГАТЕЛЯ ПЕРЕКРЫТИЯ
ЧЕРНЫЙ МАЛЕНЬКИЙ КВАДРАТ
9643 25AB БЕЛЫЙ МАЛЕНЬКИЙ КВАДРАТ
9644 25AC ЧЕРНЫЙ ПРЯМОУГОЛЬНИК
25AD БЕЛЫЙ ПРЯМОУГОЛЬНИК
9646 25AE ЧЕРНЫЙ ВЕРТИКАЛЬНЫЙ ПРЯМОУГОЛЬНИК
9647 БЕЛЫЙ ВЕРТИКАЛЬ БЕЛЫЙ ПРЯМОУГОЛЬНИК 9648 25B0 ЧЕРНАЯ ПАРАЛЛЕЛОГРАММА
9649 25B1 БЕЛАЯ ПАРАЛЛЕЛОГРАММА
9650 25B2 ЧЕРНЫЙ УКАЗАТЕЛЬ 25B3 БЕЛЫЙ ТРЕУГОЛЬНИК, УПРАВЛЯЮЩИЙ ВВЕРХ
9652 25B4 ЧЕРНЫЙ, УКАЗАННЫЙ Вверх МАЛЕНЬКИЙ ТРЕУГОЛЬНИК
9653 25B5 9653 25B5 БЕЛЫЙ НАПРАВЛЯЮЩИЙ МАЛЫЙ ТРЕУГОЛЬНИК
9654 25B6 ЧЕРНЫЙ НАПРАВЛЯЮЩИЙ ТРЕУГОЛЬНИК ВПРАВО
9655 25B7 БЕЛЫЙ ПРАВО-УКАЗАТЕЛЬ 9656 25B8 ЧЕРНЫЙ УКАЗАТЕЛЬ ВПРАВО SM ВЕСЬ ТРЕУГОЛЬНИК
9657 25B9 БЕЛЫЙ НАПРАВЛЯЮЩИЙ ВПРАВО МАЛЕНЬКИЙ ТРЕУГОЛЬНИК
9658 25BA ЧЕРНЫЙ УКАЗАТЕЛЬ ВПРАВО 9659 25BB БЕЛЫЙ УКАЗАТЕЛЬ ВПРАВО
9660 25BC ЧЕРНЫЙ ТРЕУГОЛЬНИК ВНИЗ
БЕЛЫЙ 25BD DOWN 9661 25BD -ПОКАЗЫВАЮЩИЙ ТРЕУГОЛЬНИК
9662 25BE ЧЕРНЫЙ НАПРАВЛЯЮЩИЙ ВНИЗ МАЛЕНЬКИЙ ТРЕУГОЛЬНИК
9663 25BF БЕЛЫЙ ТРЕУГОЛЬНИК 14 9 9664 25C0 ЧЕРНЫЙ ЛЕВОГО УКАЗАНИЯ T ТРЕУГОЛЬНИК
9665 25C1 БЕЛЫЙ ТРЕУГОЛЬНИК ЛЕВОГО УКАЗАНИЯ
9666 25C2 ЧЕРНЫЙ ЛЕВЫЙ УКАЗАТЕЛЬ 25C3 БЕЛЫЙ МАЛЕНЬКИЙ ТРЕУГОЛЬНИК ЛЕВОГО УКАЗАНИЯ
9668 25C4 ЧЕРНЫЙ ЛЕВОЙ УКАЗАТЕЛЬ
9669 25C -УКАЗАТЕЛЬ УКАЗАНИЯ
9670 25C6 ЧЕРНЫЙ БРИЛЛИАНТ
9671 25C7 БЕЛЫЙ АЛМАЗ

7 900C

БЕЛЫЙ БРИЛЛИАНТ, СОДЕРЖАЩИЙ ЧЕРНЫЙ МАЛЕНЬКИЙ АЛМАЗ
9673 25C9 FISHEYE
9674 25CA & loz; LOZENGE
9675 25CB БЕЛЫЙ КРУГ
9676 25CC ТОЧЕЧНЫЙ КРУГ
КРУГ С ВЕРТИКАЛЬНЫМ ЗАПОЛНЕНИЕМ
9678 25CE BULLSEYE
9679 25CF ЧЕРНЫЙ 96 КРУГ
КРУГ С ЛЕВОЙ ПОЛОВИНОЙ ЧЕРНЫЙ
9681 25D1 КРУГ С ПРАВОЙ ПОЛОВИНОЙ ЧЕРНЫЙ
9682 25D2 ДЛИН.
9683 25D3 КРУГ С ВЕРХНЕЙ ПОЛОВИНОЙ ЧЕРНЫЙ
9684 25D4 КРУГ С ВЕРХНИМ ПРАВЫМ КВАДРАНТОМ ЧЕРНЫЙ
9685 25D5 С ВЕРХНИЙ ПЕРЕХОДНИК ЧЕРНЫЙ КВАДРАНТ
9686 25D6 ЛЕВАЯ ПОЛОВИНА ЧЕРНЫЙ КРУГ
9687 25D7 ПРАВАЯ ПОЛОВИНА 917 968 ОБРАТНАЯ ПУЛЬТА
9689 25D9 ОБРАТНЫЙ БЕЛЫЙ КРУГ
9690 25DA
0 99916 ЧЕРНЫЙ ПРАВЫЙ 999 90 014 КВАДРАТНЫЙ С ПРАВЫЙ 9710 БЕЛЫЙ С ВЕРХНИМ ЛЕВЫМ КВАДРАНТОМ
ВЕРХНЯЯ ПОЛОВИНА ИНВЕРСИЯ БЕЛЫЙ 9691 25DB НИЖНИЙ HA LF ОБРАТНЫЙ БЕЛЫЙ КРУГ
9692 25DC ВЕРХНИЙ ЛЕВЫЙ КВАДРАНТ КРУГЛОЙ ДУГИ
9693 25DD
9693 25DD ПРАВАЯ ПЕРЕДНИЙ 9694 25DE НИЖНЯЯ ПРАВАЯ КРУГЛОДНАЯ ДУГА КВАДРАНТА
9695 25DF НИЖНЯЯ ЛЕВАЯ ЦИРКУЛЯРНАЯ ДУГА 256916
6
6 ПОЛУКРУГ
9697 25E1 НИЖНЯЯ ПОЛОВИНА КРУГА
9698 25E2 ЧЕРНЫЙ ПРАВЫЙ 96
ЧЕРНЫЙ НИЖНИЙ ЛЕВЫЙ ТРЕУГОЛЬНИК
9700 25E4 ЧЕРНЫЙ ВЕРХНИЙ ЛЕВЫЙ ТРЕУГОЛЬНИК
9701 25E5 ЧЕРНЫЙ ВЕРХНИЙ ПРАВЫЙ ТРЕУГОЛЬНИК
9702
9702
9702 БЕЛЫЙ ПУЛЬТ
9703 25E7 КВАДРАТ С ЛЕВОЙ ПОЛОВИНОЙ ЧЕРНЫЙ
9704 25E8 КВАДРАТНЫЙ 9 9705 25E9 КВАДРАТ С ВЕРХНИМ ЛЕВЫМ ДИАГОНАЛЬНЫМ ПОЛОВИНОЙ ЧЕРНЫЙ
9706 25EA КВАДРАТ С НИЖНИМ ПРАВОМ ДИАГОНАЛЬНЫМ ДИАГОНАЛОМ 970 970 970 970 970 970 970 970 БЕЛАЯ ПЛОЩАДЬ С ВЕРТИКАЛЬНОЙ ДВОЙНОЙ ЛИНИЕЙ
9708 25EC БЕЛЫЙ ТРЕУГОЛЬНИК, УПРАВЛЯЮЩИЙ ВВЕРХ, С ТОЧКОЙ
9709 25ED ТРЕУГОЛЬНИК ВВЕРХ С ЛЕВОЙ ПОЛОВИНОЙ ЧЕРНЫЙ
25EE ВЕРХНИЙ ТРЕУГОЛЬНИК С ПРАВОЙ ПОЛОВИНКОЙ ЧЕРНЫЙ
9711 25EF БОЛЬШОЙ КРУГ
9712 25FAR0
9713 25F1 БЕЛЫЙ КВАДРАТ С НИЖНИМ ЛЕВЫМ КВАДРАНТОМ
9714 25F2
0 9000 9000
БЕЛЫЙ ПЕРЕДНИЙ ПЕРЕДНИЙ КВАДРАТ БЕЛЫЙ КВАДРАТ 9715 25F3 БЕЛЫЙ КВАДРАТ С ВВЕРХ НА ПРАВЫЙ КВАДРАНТ
9716 25F4 БЕЛЫЙ КРУГ С ВЕРХНИМ ЛЕВЫМ КВАДРАНТОМ
9717 25F5 БЕЛЫЙ КРУГ ПЕРЕДНИЙ ПЕРЕДНИЙ КРУГ 9718 25F6 БЕЛЫЙ КРУГ С ПРАВЫМ НИЖНИМ КВАДРАНТОМ
9719 25F7 БЕЛЫЙ КРУГ С ВЕРХНИМ ПРАВЫМ КВАДРАНТОМ
97208
97208
97208 ВЕРХНИЙ ЛЕВЫЙ ТРЕУГОЛЬНИК
9721 25F9 ВЕРХНИЙ ПРАВЫЙ ТРЕУГОЛЬНИК
9722 25FA НИЖНИЙ ЛЕВЫЙ ТРЕУГОЛЬНИК 9721
25FB БЕЛЫЙ СРЕДНИЙ КВАДРАТ 90 017
9724 25FC ЧЕРНЫЙ СРЕДНИЙ КВАДРАТ
9725 25FD БЕЛЫЙ СРЕДНИЙ МАЛЕНЬКИЙ КВАДРАТ
97
17 ЧЕРНЫЙ СРЕДНИЙ МАЛЫЙ КВАДРАТ
9727 25FF НИЖНИЙ ПРАВЫЙ ТРЕУГОЛЬНИК
.

вики по тегу css-shape — qaruQaruSite Переполнение стека
  1. Около
  2. Продукты
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

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

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