Доброго времени суток.
Каким образом можно сделать линии?
Также чтобы она не распадалась при адаптиве.
Ответ
Можно сделать с помощью 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); }
Комментариев нет:
Отправить комментарий