Как сделать треугольник, как на фотографии?

Question

Мне нужно, чтобы треугольник внутри был пустым, как на фото. Долго искал в интернете, ничего не нашёл. Буду благодарен за помощь!

Answer 1

.triangle {
  width: 150px;
  height: 150px;
  border-left: 5px solid green;
  position: relative;
  margin: 50px;
}
.triangle::after, .triangle::before {
  content: "";
  position: absolute;
  height: 5px;
  background: green;
  transform-origin: 0 0;
}
.triangle::before {
  top: 0;
  left: 0;
  right: 3px;
  transform: rotate(30deg);
}
.triangle::after {
  bottom: 0;
  right: 7px;
  left: -2.5px;
  transform: rotate(-30deg);
}

<div class = 'triangle'></div>

Answer 2

Можно и проще сделать

Нарисовать в SVG и либо оставить эту фигуру в разметке:

<div style="width: 50px;">
  <svg viewBox='0 0 100 100'><path d='M2,0 100,50 2,100z' style='fill: none; stroke: red; stroke-width: 2;'/></svg>
</div>

А можно поставить эту же фигуру в css и если потребуется то менять её уже внутри css

.item {
  width: 50px;
  height: 50px;
  background-image: url("data:image/svg+xml, <svg  preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M2,0 100,50 2,100z' fill='none' stroke='red' stroke-width='2'/></svg>");
  background-size: 100% 100%;
}

<div class="item"></div>

Маленький бонус с использованием vanilla-tilt.js

.item {
  width: 50px;
  height: 50px;
  background-image: url("data:image/svg+xml, <svg  preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M2,0 100,50 2,100z' fill='none' stroke='red' stroke-width='2'/></svg>");
  background-size: 100% 100%;
}

<div class="item" data-tilt data-tilt-max="50" data-tilt-speed="3000" data-tilt-perspective="300"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js" integrity="sha512-K9tDZvc8nQXR1DMuT97sct9f40dilGp97vx7EXjswJA+/mKqJZ8vcZLifZDP+9t08osMLuiIjd4jZ0SM011Q+w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Как видно со всех примеров что SVG не сложен ... и применять его можно как в HTML так и в CSS

БЛОГ НА HUSL

Как сделать треугольник, как на фотографии?

Ответы (2 шт):