主页 / 问题 / 726032
Accepted
Игорь Мясников
Asked:2020-10-03 16:47:01 +0000 UTC2020-10-03 16:47:01 +0000 UTC

如何在css中制作带有渐变的角度自适应线？

  • 772

形状 css

再会。你怎么能画线？此外，使其在自适应时不会分崩离析。

javascript

2 个回答

  1. Best Answer

    您可以使用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);
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="line">
  <div class="line-2"></div>
  <div class="dot"></div>
</div>

    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);
  
}
    <div class="line">
  <div class="line-2"></div>
  <div class="dot"></div>
</div>

    • 12

  2. 可以用 SVG 完成

    <svg width="200" height="100">
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="transparent"/>
      <stop offset="100%" stop-color="#000"/>
    </linearGradient>
  <polyline fill="none" stroke="url(#linear)" 
      points="0,0 50,50 190,50" stroke-width="2"/>
  <circle cx="194" cy="50" r="5"stroke="black" fill="none" stroke-width="2"/>
</svg>

    • 8

相关问题