Треугольник без заливки

391

08 июня 2017, 06:51

Подскажите, как создать треугольник с помощью css без бэкграунда?

Answer 1

Берем квадратный блок, задаем левую и верхнюю границу, а затем поворачиваем на 45 градусов.

.arrow { 
  width: 20px; 
  height: 20px; 
  border: 1px solid #000000; 
  border-width: 1px 0 0 1px; 
  transform: rotate(-45deg) 
}

<div class="arrow"></div>

Answer 2

Как пример:

Пихаем один div в другой. Во внешнем назначаем border с одной стороны, у внутреннего - с двух других, при этом внутренний поворачиваем на 45 градусов и размещаем относительно первого.

#wrapper { 
  background: url(http://cdn.fishki.net/upload/post/2017/03/19/2245758/tn/01-beautiful-white-cat-imagescar-wallpaper.jpg) no-repeat; 
   
  height: 400px; 
} 
.container { 
    width: 235px; 
    height: 215px; 
    position: relative; 
    border-right: 2px solid #e74c3c; 
} 
 
.triangle { 
    position: absolute; 
    margin: auto; 
    width: 150px; 
    height: 150px; 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    border-left: 2px solid #e74c3c; 
    border-bottom: 2px solid #e74c3c; 
    right: -75px; 
    top: 32px; 
} 
 
.demo { 
    position: fixed; 
    margin: auto; 
    right: 0; 
    bottom: 0;     
    background: #fff; 
    background: rgba(255, 255, 255, .9); 
    width: 400px; 
    height: 220px; 
    padding-top: 120px; 
}

<div id="wrapper"> 
  <div class="container"> 
      <div class="triangle"></div> 
  </div> 
</div>

Answer 3

может создать блок, в нем квадрат на 45 градусов повернутый, и сдвинуть вверх на 50% с overflow: hidden. Тогда получится у вас квадрат, которому можно поставить границу в 1px и без фона... как то так думаю, но не факт