Css треугольник: Треугольники через CSS | htmlbook.ru

Leave a Comment / Css / By /

Содержание

css — Div треугольником — Stack Overflow на русском

Вопрос задан

Изменён 7 лет 7 месяцев назад

Просмотрен 5k раз

Можно ли как-то сделать div с фиксированной высотой и шириной не прямоугольником/квадратом, а к треугольником. Чтобы незаполненная область div попросту удалялась. Нужно для кореектного отображения того что находится под div, потому как контент должен уезжать под шапку, но кусочек этой шапки своей неиспользуемой частью div перекрывает то, что под него уезжает и ессно из-за z-index туда даже не кликнуть

  • css
  • javascript

2

Треугольником сделать нельзя. Можно сделать треугольный бордер, если это устроит.

css3 shapes

#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

UPD:

Добавьте поверх них прозрачные квадратные картинки с imageMap и будет вам счастье: активная зона любой формы и уезжание под шапку.

5

Вместо div’а используй inline svg — там можно получить любую форму.

Ещё вариант — использовать clip по маске или clip-path. Для IE не получится.

Пример с сайта CSS-Tricks 

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	
	border-bottom: 5px solid black;
}

.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	
	border-top: 20px solid #f00;
}

.

 arrow-right {
	width: 0; 
	height: 0; 
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
	
	border-left: 60px solid green;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	
	border-right:10px solid blue; 
}
<div></div>
<div></div>
<div></div>
<div></div>

(Лицензия, если что.)

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Рисуем треугольники

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

Примеры

Как это работает

Когда браузер отрисовывает границы, то делает это особым образом, закрашивая области под углом. Можно воспользоваться этим обстоятельством. Одну сторону границы закрасим в цвет будущего треугольника, а остальные сделаем прозрачными. Затем установим ширину границы, присвоив ему какое-нибудь значение, например, 20 пикселей. А ширину и высоту фигуры сделаем равным 0.

Интересный пример получается, если раскрасить все четыре стороны границы в свой цвет.


.arrow-multicolor {
    border-color: red green blue orange;
    border-style:solid;
    border-width:50px;
    width:0;
    height:0;
}

<div></div>

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


.arrow-acute {
    border-color: red green blue orange;
    border-style:solid;
    border-width:25px 10px 15px 30px;
    width:0;
    height:0;
}

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


.arrow {
  width: 0; height: 0;
  border: 50px solid;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: orange;
}

Левую часть укажем прозрачной.


.arrow {
  width: 0; height: 0;
  border: 50px solid;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: transparent;
}

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


.arrow {
    width: 0; height: 0;
    border: 100px solid;
    border-color: transparent;
    border-bottom-color: blue;
}

Также вы можете попробовать использовать различные стили, но следует быть осторожным и тестировать в разных браузерах.

border-style:ridge;
border-style:groove;
border-style:double;

Speech bubble

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

Привет! Как дела?

Это окошко создано без использования картинок!


<div>
    Привет! Как дела?
    <div></div>
    <div></div>
</div>

.chat-bubble {
    background-color:#EDEDED;
    border:2px solid #666666;
    font-size:35px;
    line-height:1.3em;
    margin:10px auto;
    padding:10px;
    position:relative;
    text-align:center;
    width:300px;
    border-radius:10px;
    box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border {
    border-color: #666666 transparent transparent transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    bottom:-22px;
    left:30px;
}

.




 chat-bubble-arrow {
    border-color: #EDEDED transparent transparent transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    bottom:-19px;
    left:30px;
}

Другой универсальный вариант

Базовая разметка:


<div>Hello Kitty</div>

Стиль


.speech-bubble {
    position: relative;
    background-color: #e3e3e3;
    width: 200px;
    height: 150px;
    line-height: 150px; /* vertically center */
    color: white;
    text-align: center;
}

Результат

Hello Kitty

Теперь нарисуем стрелку-треугольник в нужном месте. Для начала цветной квадратик:


.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: red green blue yellow;
}

Hello Kitty

Оставляем только четверть квадратика:


. speech-bubble:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid;
    border-top-color: red;
}

Hello Kitty

Теперь перемещаем ниже и закрашиваем. Закругляем углы у сообщения:


.speech-bubble {
   /* … other styles */
   border-radius: 10px;
}
.speech-bubble:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid;
    border-top-color: #292929;
    top: 100%;
    left: 50%;
    margin-left: -15px; /* adjust for border width */
}

Hello Kitty

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


/*
   Укажите класс .speech-bubble и .speech-bubble-DIRECTION
   
Hello Kitty

*/
 
.speech-bubble {
  position: relative;
  background-color: #292929;
  width: 200px;
  height: 150px;
  line-height: 150px; /* vertically center */
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
}
 
. speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
}
 
/* Position the Arrow */
 
.speech-bubble-top:after {
  border-bottom-color: #292929;
 
  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}
.speech-bubble-right:after {
  border-left-color: #292929;
 
  left: 100%;
  top: 50%;
  margin-top: -15px;
}
 
.speech-bubble-bottom:after {
  border-top-color: #292929;
 
  top: 100%;
  left: 50%;
  margin-left: -15px;
}
 
.speech-bubble-left:after {
  border-right-color: #292929;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}

Hello Kitty

Hello Kitty

Hello Kitty

Hello Kitty

При использовании line-height при вертикальном центрировании мы получаем ограничение текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:


. speech-bubble {
    /* other styles */
    display: table;
}
.speech-bubble p {
    display: table-cell;
    vertical-align: middle;
}

Дополнительные материалы

CSS Triangle | CSS-Tricks

Реклама

html — CSS — Треугольник вниз

спросил

Изменено 6 лет, 11 месяцев назад

Просмотрено 5к раз

Как создать стрелку вниз (треугольник) при наведении курсора на ссылку?

что-то вроде вкладки результатов на CodePen, см. здесь

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

 a{
  фон: красный;
    плыть налево;
    ширина: 30%;
    отступ: 5px;
    дисплейный блок
  }
  а: наведите курсор {фон: зеленый;}
  • html
  • css
  • css-фигуры

0

Я не уверен, что вы имеете в виду, но это может быть ответом:

css: 

 . arrow_down_on_hover{
  положение: родственник;
}
.arrow_down_on_hover:до{
  содержание: "";
  ширина: 0;
  высота: 0;
  граница слева: 20px сплошная прозрачная;
  граница справа: 20px сплошная прозрачная;
  дисплей: нет;
  верхняя граница: 20px сплошная #f00;
  положение: абсолютное;
  справа: 50%;
  поле справа: -10px;
  внизу: -20px;
}
.arrow_down_on_hover:наведение:до{
  дисплей: блок;
}

html: 

 наведите курсор

пример: 

 a:hover .arrow-down {
  ширина: 0;
  высота: 0;
  граница слева: 20px сплошная прозрачная;
  граница справа: 20px сплошная прозрачная;
  
  верхняя граница: 20px сплошная #f00;
} 
 link

Может быть, вы можете просто использовать символ стрелки вниз: 

 a::after {
  содержимое: '\25bc';
  красный цвет;
}

а: наведение :: после {
  цвет: зеленый;
} 
 Наведи меня!

Вы также можете указать тот же символ в HTML вместо CSS, используя сущность: ▼ .

Приведенный ниже код просто следует учебнику, на который вы ссылаетесь в своем вопросе,

, но, поскольку вы используете ссылку a , вы должны сделать ее блочной, установив ее display:block должно быть встроенный элемент 

 a {
  ширина: 0;
  высота: 0;
  граница слева: 20px сплошная прозрачная;
  граница справа: 20px сплошная прозрачная;
  граница сверху: 20px сплошная прозрачная;
  дисплей: блок
}
а: наведите {
  граница сверху: 20px сплошной зеленый
} 
 Наведите меня

Если нужно просто показать/скрыть треугольник при наведении курсора на какую-либо ссылку, лучше использовать псевдоэлементы ::before / ::after вместе с символом стрелки вниз Unicode 

 a:hover::after {
  содержимое: "\25bc";
  цвет: зеленый
} 
 Наведите курсор

Генератор треугольников CSS | Знать, как работает генератор треугольников в CSS

Любой треугольник можно получить, соединив 3 линии в концах под определенным углом. Сумма 3-х углов треугольника должна быть 180 градусов. Обычно мы видели равносторонний треугольник и прямоугольный треугольник, в этом уроке мы увидим, как создать эти 2 треугольника. Из одного квадрата или прямоугольника можно составить 4 треугольника.

Как можно создать 4 треугольника в квадрате, вы увидите в концепции «Как работает генератор треугольников в CSS», а затем примеры развеют ваши сомнения.

Синтаксис генератора треугольников CSS: 

 div{
ширина: 0 пикселей;
высота: 0 пикселей;
граница: сплошная 200 пикселей;
цвет нижней границы: зеленый;
цвет верхней границы: прозрачный;
цвет границы слева: прозрачный;
цвет границы справа: прозрачный;
}

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

Как работает генератор треугольников в CSS?

1. Любая структура HTML-страницы должна иметь верхнюю, правую, нижнюю и левую границы. Мы можем видеть, что внутренняя и внешняя границы и имеют отклонение в 45 градусов на выделенных красных метках.

2. Просто удалите верхнюю границу, и изображение выше станет похоже на изображение ниже.

3. Удалите ширину изображения выше, тогда оно станет таким, как изображение ниже с шириной 0.

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

 

5. Наконец, удалите двустороннюю границу изображения выше, после чего результирующее изображение должно выглядеть так: треугольник, как показано ниже.

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

Примеры генератора треугольников CSS

Мы можем сформировать 2 типа треугольников в CSS, используя примеры ниже.

1. Равносторонний треугольник

В равностороннем треугольнике все стороны равны.

Пример #1 – Верхний равносторонний треугольник (не перевернутый)

Его можно сформировать, установив цвет верхней границы на зеленый, а остальные границы на прозрачный.

HTML-код: TopEquilateralTriangle.html 

 

<голова>
<метакодировка="ISO-8859-1">

Верхний равносторонний треугольник

<тело>
<дел>

Код CSS: TopEquilateralTriangle.css 

 .topEqui {
ширина: 0 пикселей;
высота: 0px;
граница: сплошная 200 пикселей;
цвет нижней границы: прозрачный;
цвет верхней границы: зеленый;
цвет границы слева: прозрачный;
цвет границы справа: прозрачный;
}

Выходные данные:

Пример 2. Нижний равносторонний треугольник (перевернутый)

Его можно сформировать, установив цвет границы-нижнего края на зеленый, а остальные границы на прозрачный. Это в точности перевернутое изображение Верхнего Равностороннего Треугольника.

HTML-код: BottomEquilateralTriangle.html 

 

<голова>
<метакодировка="ISO-8859-1">

Нижний равносторонний треугольник

<тело>
<дел>

Код CSS: BottomEquilateralTriangle.css 

 .bottomEqui {
ширина: 0 пикселей;
высота: 0px;
граница: сплошная 200 пикселей;
цвет нижней границы: зеленый;
цвет верхней границы: прозрачный;
цвет границы слева: прозрачный;
цвет границы справа: прозрачный;
}

Выходные данные:

Пример 3. Левый равносторонний треугольник (перевернутый)

Его можно сформировать, установив для левой границы зеленый цвет, а для остальных границ — прозрачный.

HTML-код: LeftEquilateralTriangle.html 

 

<голова>
<метакодировка="ISO-8859-1">

Левый равносторонний треугольник

<тело>
<дел>

Код CSS: LeftEquilateralTriangle.css 

 .leftEqui {
ширина: 0 пикселей;
высота: 0px;
граница: сплошная 200 пикселей;
цвет нижней границы: прозрачный;
цвет верхней границы: прозрачный;
цвет границы слева: зеленый;
цвет границы справа: прозрачный;
}

Выходные данные:

Пример № 4. Прямоугольный равносторонний треугольник (перевернутый)

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

HTML-код: RightEquilateralTriangle.html 

 

<голова>
<метакодировка="ISO-8859-1">

Пряморавностороннийтреугольник

<тело>
<дел>

Код CSS: RightEquilateralTriangle. css 

 .rightEqui {
ширина: 0 пикселей;
высота: 0px;
граница: сплошная 200 пикселей;
цвет нижней границы: прозрачный;
цвет верхней границы: прозрачный;
цвет границы слева: прозрачный;
цвет правой границы: зеленый;
}

Вывод:

2. Прямоугольный треугольник

Сумма квадратов основания и квадрата высоты равна квадрату гипотезы, а один угол равен 90 градусов и называется прямоугольным треугольником.

Пример № 5. Левый прямоугольный треугольник

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

HTML-код: LeftRightAngleTriangle.html 

 

<голова>
<метакодировка="ISO-8859-1">

Треугольник ЛевогоПрямогоУгла

<тело>
<дел>

Код CSS: LeftRightAngleTriangle. css 

 .leftRightAngle {
ширина: 0 пикселей;
высота: 0px;
граница: сплошная 200 пикселей;
цвет нижней границы: коричневый;
цвет верхней границы: прозрачный;
цвет границы слева: коричневый;
цвет границы справа: прозрачный;
}

Выходные данные:

Пример #5 – Прямоугольный треугольник

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

HTML-код: RightRightAngleTriangle.html   

 

<голова>
<метакодировка="ISO-8859-1">

ПрямойПрямойУголТреугольник

<тело>
<дел>

Код CSS: RightRightAngleTriangle.css 

 .rightRightAngle {
ширина: 0 пикселей;
высота: 0px;
граница: сплошная 200 пикселей;
цвет нижней границы: прозрачный;
цвет верхней границы: коричневый;
цвет границы слева: прозрачный;
цвет границы справа: коричневый;
}

Вывод:

Заключение

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

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

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