If during the creation of the gradient to specify an angle of 30 degrees, then in the chrome ladders appear. In firefox, the whole is smoothed out well. If the angle is 45 degrees, then also in the chrome is displayed normally. Is there any way to fix this?

http://codepen.io/anon/pen/jPexJr

#triangle { width: 100%; height: 1px; } #triangle:before { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(30deg, #d3bba3 0%, #d3bba3 50%, transparent 50%, transparent 100%); background: -webkit-linear-gradient(60deg, #d3bba3 0%, #d3bba3 50%, transparent 50%, transparent 100%); } #triangle:after { content: ''; display: block; position: absolute; bottom: 0; right: 0; width: 50%; height: 100%; background: linear-gradient(-30deg, #dae5e7 0%, #dae5e7 50%, transparent 50%, transparent 100%); background: -webkit-linear-gradient(-240deg, #dae5e7 0%, #dae5e7 50%, transparent 50%, transparent 100%); } 
 <div id="triangle"></div>

  • It's not about the gradient, it's about the slope (deg). It may be smoother if the gradient is drawn straight, and the rotation is done through 3D, and not 2D transformation. But it is not exactly. - SlyDeath

1 answer 1

The fact is that the borders of colors (or transparency) clearly coincide. At the same time, there is no place for a smooth transition, and any interpolation. When specifying the joints, leave a small margin (for each case, it is selected experimentally). For example, in your code, it was enough to separate the borders from each other by only 0.5 pixels (!):

 #triangle { width: 100%; height: 1px; } #triangle:before { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(30deg, #d3bba3 0%, #d3bba3 50%, transparent 50.5%, transparent 100%); background: -webkit-linear-gradient(60deg, #d3bba3 0%, #d3bba3 50%, transparent 50.5%, transparent 100%); } #triangle:after { content: ''; display: block; position: absolute; bottom: 0; right: 0; width: 50%; height: 100%; background: linear-gradient(-30deg, #dae5e7 0%, #dae5e7 50%, transparent 50.5%, transparent 100%); background: -webkit-linear-gradient(-240deg, #dae5e7 0%, #dae5e7 50%, transparent 50.5%, transparent 100%); } 
 <div id="triangle"></div>

  • dig deep :) And the topic and the date - it took 3 and a half years - Alexandr_TT
  • @Alexandr_TT Constantly looking for old questions - the time has passed, new technologies have appeared, answers have appeared and solutions to what has been done through crutches and hacks. The questions are hanging, but in the internet there are only reposts of the main parameters, and no nuances for you. So I update)) - UModeL
  • Yes, I didn’t Che, I’m Nothing :))) So I simply said hello - Alexandr_TT