Как сделать изогнутую под углом адаптивную линию с градиентом на css?

#javascript #html #css #css3 #svg

Доброго времени суток.
Каким образом можно сделать линии?
Также чтобы она не распадалась при адаптиве. 
    

Ответы

Ответ 1

Можно сделать с помощью js через тангенс угла:



$(document).ready(function() {
  function line2position() {
    var el = $('.line-2');
    var elWidth = el.width();
    var elHeight = (($('.line').height()) - 34);
    var elTg = elHeight / elWidth;
    var elRad = Math.atan(elTg);
    var elDeg = elRad / Math.PI * 180;
    el.css('transform', 'skewY(' + elDeg + 'deg)');
  };

  $(window).load(function() {
    line2position();
  });
  $(window).resize(function() {
    line2position();
  });
});
*,
*:before,
*:after {
  box-sizing: border-box;
}

.line {
  position: relative;
  height: 100px;
}

.dot {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 30px;
  width: 30px;
  right: 0;
  border: #000 4px solid;
  border-radius: 50%;
}

.line:before {
  content: '';
  position: absolute;
  left: 30%;
  bottom: 13px;
  right: 30px;
  height: 4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000',
endColorstr='#000000', GradientType=1);
}

.line-2 {
  position: absolute;
  left: 0;
  top: 50%;
  width: 30%;
  height: 4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',
endColorstr='#80000000', GradientType=1);
}


  

  






UPD

Хотя можно и без js, если ширина промежутка под углом фиксированная:



*,
*:before,
*:after {
  box-sizing: border-box;
}

.line {
  position: relative;
  height: 100px;
}

.dot {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 30px;
  width: 30px;
  right: 0;
  border: #000 4px solid;
  border-radius: 50%;
}

.line:before {
  content: '';
  position: absolute;
  left: 100px;
  bottom: 13px;
  right: 30px;
  height: 4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000',
endColorstr='#000000', GradientType=1);
}

.line-2 {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100px;
  height: 4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',
endColorstr='#80000000', GradientType=1);
  transform: skewY(33.3deg);
  
}

  

  




Ответ 2

Можно с помощью SVG