Создание треугольника div с границей

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

#corner {
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 50px solid #000;
  border-bottom: 50px solid transparent;
  border-right: 50px solid transparent;
  border-left: 50px solid #000;
}
<div id="corner"></div>

EDIT - я хочу, чтобы у него была красная граница 5 пикселей (только на угловой стороне), чтобы треугольник и граница были разных цветов

В идеале у него также будет изображение.png, но я могу добавить еще один div поверх него, если понадобится

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

+2
источник поделиться
3 ответа

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

Просмотрите эту скрипку или следующий фрагмент для визуального представления.

Snippet:

#corner {
  /* Dimensions */
  height: 200px;
  width: 200px;
  
  /* Positioning */
  position: absolute;
  left: -7.5em;
  top: -7.5em;
  z-index: 999;
  transform: rotateZ(-45deg);
  
  /* Styling */
  background-color: red;
  border-bottom: 5px solid #0c0c0c;
}
<div id="corner"></div>
+1
источник

Создайте два div:

#corner {
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 55px solid #f00;
  border-bottom: 55px solid transparent;
  border-right: 55px solid transparent;
  border-left: 55px solid #f00;
}

#corner-inner {
  position: absolute;
  z-index: 999;
  left: -55px;
  top: -55px;
  width: 0;
  height: 0;
  border-top: 50px solid #000;
  border-bottom: 50px solid transparent;
  border-right: 50px solid transparent;
  border-left: 50px solid #000;
}
<div id="corner">
    <div id="corner-inner"></div>
</div>
+2
источник

Вы даже можете попробовать псевдоэлементы :before и :after.

#corner {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 50px solid #000;
  border-bottom: 50px solid transparent;
  border-right: 50px solid transparent;
  border-left: 50px solid #000;
}
#corner:before{
  content:"";
  position:absolute;
  border-top: 5px solid red;
  border-left: 5px solid red;
  top:-50px;
  left:-50px;
  width:92px;
  height:92px;
}
#corner:after{
  content:"";
  position:absolute;
  border-right: 5px solid red;
  top:-104px;
  left:-83px;
  width:93px;
  height:140px;
  transform:rotate(45deg);
}
<div id="corner"></div>
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос