Написание треугольника CSS (совместимо с IE6)

CSS
Написание треугольника CSS (совместимо с IE6)

содержание

  • Введение
  • преимущество
  • принцип
    • 1. Сначала создайте div
    • 2. Затем установите границу для div.
    • 3. Установите другой цвет для четырех границ div
    • 4. Установите ширину и высоту на 0
    • 5. Остальные углы прозрачные
    • 6. Совместимость с браузером IE6
      • Причина этого:
      • Самое простое решение: (добавлено позже)
      • Другие решения:
    • 7. Решить проблему треугольного отображения встроенных элементов
      • почему эта проблема
      • Решение
        • 1. Убрать фиксированную высоту контента
        • 2. Преобразование встроенных элементов в элементы блочного уровня или встроенные блочные элементы.
        • 3. Удалите элемент с этикетки (если он предполагает специальный макет, его можно использовать напрямую)
  • окончательный код
  • расширять
    • угловой треугольник
    • Треугольник с прямым углом
    • стрела
    • диалог
    • Маленький прямоугольник со скругленными углами, совместимый с IE8
    • Используйте вращение css3 для создания треугольников

Введение

Есть несколько способов сделать треугольники:

  • Картинки, спрайты (NetEase)
  • Значок шрифта (JD.com)
  • Чистое написание кода (Amazon)

Чистый код, в основном представленный здесь, написан.

преимущество

  1. Треугольники, написанные кодом, независимо от их размера, неискажены.
  2. Код работает быстрее, чем картинка.
  3. Если значок шрифта не упоминается в проекте, написание кода относительно надежно.

принцип

Принцип заключается в использовании свойства границы в блочной модели CSS.
С помощью свойства границы можно добиться треугольного графического эффекта с хорошей совместимостью.На нижний слой влияет начало/начало стиля границы.3D-эффект границы по-прежнему очень популярен на заре Интернета.

1. Сначала создайте div

<div></div>

2. Затем установите границу для div.

div{
    width:200px;
    height:100px;
    border:10px solid red; 
}

Вы можете увидеть эффект:

border.jpg

3. Установите другой цвет для четырех границ div

div{
    width:200px;
    height:100px;
    border-left:10px solid red;
    border-top:10px solid green; 
    border-right:10px solid blue; 
    border-bottom:10px solid yellow; 
}

Можно увидеть следующие эффекты:

border1.png

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

4. Установите ширину и высоту на 0

div{
    width:0px;
    height:0px;
    border-left:10px solid red;
    border-top:10px solid green; 
    border-right:10px solid blue; 
    border-bottom:10px solid yellow; 
}

/*也可以这么写*/
div{
    width:0px; 
    height:0px;
    border:10px solid;   
    border-color:red green blue yellow;
}

Можно увидеть следующие эффекты:

border2.png

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

Это начало треугольника.

5. Остальные углы прозрачные

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

div{
    width:0px; 
    height:0px;
    border-width:10px;   
    border-color:#f00 transparent transparent transparent;
    border-style:solid;
}

/*也可以再进行合并*/
div{
    width:0px; 
    height:0px;
    border:10px solid;   
    border-color:#f00 transparent transparent transparent;
}

bingo.jpg

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

6. Совместимость с браузером IE6

Тот самый треугольник, что отображается в IE6?

IE6.png

Причина этого:

  • IE6 не поддерживает прозрачные границы
  • IE6 имеет минимальную высоту 19 пикселей и не поддерживает высоту 0.

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

Самое простое решение: (добавлено позже)

div{
    /*不支持transparent*/
    border-style:solid dashed dashed dashed;
    /*高度最小不为0*/
    overflow:hidden;
}

Другие решения:

  1. Проверил интернет, если IE6 не поддерживает прозрачный,

Сделай это:

div{
    border:solid 1px transparent; 
    _border-color:tomato; 
    _filter:chroma(color=tomato); 
}

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

div{
    width:0px;
    height:0px;
    margin:100px auto;
    border-width:10px;
    border-style:solid;
    border-color:#f00 transparent transparent transparent;
    _border-color:#f00 tomato tomato tomato; 
    _filter:chroma(color=tomato);
}
  1. Если это необходимо для решения проблемы высоты IE6 (вы также можете добавить подчеркивание впереди, чтобы указать совместимый IE6)
div{
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
}

7. Решить проблему треугольного отображения встроенных элементов

почему эта проблема

потому что мы только что использовали<div>Чтобы сделать треугольники, конечно, мы часто используем<em><i>Или псевдоэлементы, чтобы сделать несколько маленьких иконок. Тогда может быть проблема с дисплеем. Код ниже:

<style>
em{
	width: 0;
	height: 0;
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
}
</style>

<em></em>

Вы можете видеть, что страница выглядит так:

inline.png

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

inline2.png

вызвать это

  1. Это связано с тем, что сам встроенный элемент имеет фиксированную высоту, а ширина и высота не могут быть установлены на 0, поэтому нет проблем с 50px сверху и снизу, но расстояние растягивается посередине, и возникает трапециевидный эффект.
  2. И если выше нет блочного элемента, он начинается с содержимого встроенного элемента, поэтому верхняя граница будет идти в верхнюю часть видимой области браузера.

Решение

Есть много способов сделать это:

1. Убрать фиксированную высоту контента

Используйте font-size:0;, чтобы удалить фиксированную высоту содержимого.

em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	font-size: 0;
}
2. Преобразование встроенных элементов в элементы блочного уровня или встроенные блочные элементы.
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	display: block;   /*也可以是inline-block*/
}
3. Удалите элемент с этикетки (если он предполагает специальный макет, его можно использовать напрямую)
/*脱标*/
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	position: absolute;
	top:0;
	left:0;
}

/*or 浮动*/
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	float:left;
}

окончательный код

Ниже приведен код треугольника, совместимый с версией IE6.

div{
    width:0px; /*设置宽高为0*/
    height:0px;/*可不写*/
    border-width:10px;   /*数值控制三角的大小，垂直的位置*/
    border-color:#f00 transparent transparent transparent;/*上右下左，transparent是透明的*/
    border-style:solid dashed dashed dashed;/*设置边框样式，dashed是兼容IE6写的*/
    overflow:hidden;/*兼容IE6最小高度不为0写的*/
}

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

==Треугольник завершен. ==

расширять

угловой треугольник

Выше приведены все треугольники с углом 45 градусов, и угол треугольника можно определить по высоте и ширине границы.

有角度的三角.png

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

div{
	width: 0px;
	height: 0px;
	margin: 100px auto;
	border-width:10px 30px;
	border-color:transparent transparent transparent red;
	border-style:solid;
}

Треугольник с прямым углом

有一个角是直角的三角.png

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

div{
	width: 0;
	border-width: 20px 10px;
	border-style: solid;
	border-color: red red transparent transparent;
}

стрела

箭头.png

На самом деле принцип прост, то есть два треугольника перекрываются. Треугольник выше — цвет фона.

<style type="text/css">
.san {
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid; 
	position: relative;
	}
.si {
	border-width: 30px;
	border-color: transparent transparent transparent #fff;
	border-style: solid; 
	position: absolute;
	left: -50px;
	top: -30px;
}
</style>

<!--html结构-->
<div class="san">
	<div class="si"></div>
</div>

диалог

对话框.jpg

Это очень удобно делать с помощью псевдоэлементов.

<style type="text/css">
div{
	width: 150px;
	padding: 10px;
	line-height: 20px;
	color: #9c623f;
	background-color: rgba(255, 236, 193, 0.72);
	border-radius: 10px;
	position: relative;
}
div::before{    
    content:"";   
    border-width: 10px; 
    border-color:transparent rgba(255, 236, 193, 0.72) transparent transparent;
    border-style: solid; 
    position: absolute;  
    left: -20px;
    top: 10px;
}
</style>

<div class="select-toast">早安，哈哈！今天天气不错，很好！</div>

Маленький прямоугольник со скругленными углами, совместимый с IE8

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

до - трапеция с направлением вверх, а после - трапеция с направлением вниз.

Будьте осторожны, чтобы не быть слишком широким, иначе он станет прямоугольником с обрезанными краями, поэтому вы можете избежатьborder-radiusпроблемы совместимости

兼容IE8的小圆角矩形.png

<style type="text/css">
div{
	width: 140px;
	height: 40px;
    background-color: rgb(244,121,128);
	position: relative;
}
div:before,
div:after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    border-style: solid;
}
div:before {
    top: -3px;
    border-width: 0 3px 3px;
    border-color: transparent transparent red;
}
div:after {
    bottom: -3px;
    border-width: 3px 3px 0;
    border-color: red transparent transparent;
}
</style>

<div></div>

Используйте вращение css3 для создания треугольников

Если вы можете использовать CSS3, вы также можете быть использованы для преобразования свойства Rotate

Схема наверное такая: Поверните внутреннюю часть на 45 градусов, внешнююoverflow:hiddenТолько что

利用css3旋转来制作三角形.jpg

<style type="text/css">
	i,s{
		text-decoration: none;
		font-style: normal;
		display: block;
		width: 20px;
		height: 20px;
	}
	i{
		position: relative;
		overflow: hidden;
	}
	s{
		position: absolute;
		top:-14px;
		background: yellowgreen;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
</style>

<!--html结构-->
<i>
	<s></s>
</i>

Окончательный рендеринг:

利用css3旋转来制作三角形2.jpg

@ version1.0——2018-11-8——Создать «Запись треугольника CSS (совместимо с IE6)»

©burning_rhyme семь семь

Категории