Диагональная линия в css. Как?

#html #css #вёрстка #svg

Как сделать "декоративную" (диагональную) линию белого цвета шириной 1px для блока.
 При изменении размера блока, линия должна оставаться по диагонали (являлась адаптивной)?
    

Ответы

Ответ 1

С помощью js можно, например, сделать так:



var a = $('.wrapper').height(); //получаем высоту прямоугольника
var b = $('.wrapper').width(); // ...и его ширину

var d = Math.sqrt(a*a+b*b); //высчитываем диагональ

var sin = a/d; //...синус угла между диагональню и стороной

var deg = Math.asin(sin) * (180/Math.PI); //...угол

 $('.inner').css({
    'width': d, //задаём длину диагонали
    'transform': 'rotate('+deg+'deg)' //...и угол наклона при первой загрузке страницы
  });

$(window).resize(function() { //меняем параметры при изменении размеров экрана

  b = $('.wrapper').width();

  d = Math.sqrt(a*a+b*b);

  sin = a/d;

  deg = Math.asin(sin) * (180/Math.PI);


  $('.inner').css({
    'width': d,
    'transform': 'rotate('+deg+'deg)'
  });

});
.wrapper {
  height: 200px;
  border: 1px solid black;
}

.inner {
  border-top: 1px solid red;
  transform-origin: 0 0;
}






Ответ 2

Пример с svg:



html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

.box {
  position: relative;
  max-width: 300px;
  width: 100%;
  margin: 3rem auto;
  
  transition: all .2s;
}

.box img {
  display: block;
  max-width: 100%;
  width: 100%;
}

/* Диагональ */
.box:after {
  content: '';
  position: absolute;
  left: 0;
  top:0;
  right: 0;  
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,');
  -webkit-background-size: cover;
  background-size: cover;
}


/* Пример с изменением размеров блока с диагональю */
.box:hover {
  transform: scale(1.5);
}

    

  

    



Ответ 3

.diagonal-line {
  background-color: #000;
  background-image: linear-gradient(to bottom right, transparent 45%, #fff, transparent
54%);
  background-repeat: no-repeat;
  font-size: 50px;
  text-align: center;
  color: #ffff00;
}
linear-gradient


Ответ 4

Не совсем понятен вопрос, но как вариант: 


задать блоку position: relative,  
разместить внутри него блок с position: absolute,  
задать ему border-bottom: 1px solid #someColor  
и применить transform: rotate(someAngle).


Вроде бы ничего сложного.


Ответ 5

С помощью JS и Linear-gradient



function myDeg() {
  h = $("div").height();
  w = $("div").outerWidth();
  deg = Math.atan(h / w);
  $("div").css("background", "linear-gradient(" + deg + "rad, mediumorchid calc(50%
- 1px), white 50%,  mediumorchid calc(50% + 1px), mediumorchid 100% )");
}

myDeg();
$(window).resize(function() {
  myDeg();
});
div {
  height: 200px;
  background-color: mediumorchid;
}