Блог

Главная - Вопросы по программированию - CSS как соединить строки

CSS как соединить строки

#css #line

#css #строка

Вопрос:

У меня есть горизонтальные линии, созданные с помощью CSS в <div> элементах, теперь я хочу соединить их другой линией (нарисованной от руки), есть идеи? Изображение того, что я делаю ниже:

введите описание изображения здесь

 .canvas {
  top: 1px;
  left: 1px;
  background-color: #CCC;
  width: 1000px;
  height: 1000px;
}

.top-line {
  top: 100px;
  left: 256px;
  position: absolute;
  border-top: 1px solid #000;
  height: 1px;
  width: 488px;
}

.bottom-line {
  top: 900px;
  left: 100px;
  position: absolute;
  border-top: 1px solid #000;
  height: 1px;
  width: 800px;
}  
 <div class="canvas">
  <div class="top-line"></div>
  <div class="left-line"></div>
  <div class="right-line"></div>
  <div class="bottom-line"></div>
</div>

Комментарии:

1. Обязательно ли делать строки 4 разными разделителями? вы могли бы добавить границу к контейнеру и transform: skew() к нему.

2. Открыты ли вы для решений, которые включают Javascript, или вы ищете чисто CSS-решение для этого?

3. используйте ячейку таблицы с rowspan, которая представляет собой количество строк между верхней строкой и нижней строкой, затем поместите туда gif с изображением строки соответствующей высоты / ширины

Ответ №1:

Вы можете рассмотреть один элемент и некоторые преобразования, чтобы визуально достичь желаемого:

 .box {
  width:300px;
  height:200px;
  border:1px solid;
  border-right:none; /*remove this if you want the right line too*/
  transform:perspective(30px) rotateX(5deg);
  transform-origin:bottom center;
}

body {
  background:pink;
}  
 <div class="box">
</div>

Еще одна идея, рассматривающая косое преобразование:

 .box {
  width:300px;
  height:200px;
  border-bottom:1px solid;
  position:relative;
}
.box:before,
.box:after {
  content:"";
  position:absolute;
  top:0;
  height:100%;
  width:50%;
  border-top:1px solid;
}
.box:before {
  border-left:1px solid;
  transform-origin:bottom left;
  left:0;
  transform:skew(-10deg);
}
.box:after {
  /*border-right:1px solid; add this for the right line */
  transform-origin:bottom right;
  right:0;
  transform:skew(10deg);
}

body {
  background:pink;
}  
 <div class="box">
</div>

Ответ №2:

Я пишу некоторые CSS для left-line приведенного ниже фрагмента кода, надеюсь, это поможет вам. Спасибо

 .left-line {
    border-left: 1px solid #000;
    height: 815px;
    position: relative;
    left: 161px;
    transform: rotate(11deg);
    top: 181px;
}
  

 .canvas {
  top: 1px;
  left: 1px;
  background-color: #CCC;
  width: 1000px;
  height: 1000px;
}

.top-line {
  top: 100px;
  left: 256px;
  position: absolute;
  border-top: 1px solid #000;
  height: 1px;
  width: 488px;
}

.bottom-line {
  top: 900px;
  left: 100px;
  position: absolute;
  border-top: 1px solid #000;
  height: 1px;
  width: 800px;
}

.left-line {
    border-left: 1px solid #000;
    height: 815px;
    position: relative;
    left: 161px;
    transform: rotate(11deg);
    top: 181px;
}  
 <div class="canvas">
    <div class="top-line"></div>
    <div class="left-line"></div>
    <div class="right-line"></div>
    <div class="bottom-line"></div>
</div>