Добавление границы к треугольнику CSS

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

<div class="triangle-left"></div>


.triangle-left {
    width: 0; 
    height: 0; 
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-right: 22px solid white;
}

Как рисовать контур треугольника CSS, учитывая, что сам border используется для создания треугольника? Внешние div?

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

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

.triangle-left {
    width: 0;
    height: 0;
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    border-right: 23px solid red;
}

.inner-triangle {
    position: relative;
    top: -20px;
    left: 2px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid blue;
}
<div class="triangle-left">
    <div class="inner-triangle"></div>
</div>
+11
источник

Вот как я это сделаю.

.triangle-left {
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-right: 22px solid black;
  position: relative;
}

.triangle-left:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-right: 21px solid #dddddd;
  position: absolute;
  top: -21px;
  left: 1px;
}
<div class="triangle-left"></div>

Здесь он находится на JSFiddle.

+9
источник

Связанные вопросы


Похожие вопросы

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