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>

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

— 27.03.2019 21:40

Вы открыты для решений, использующих Javascript, или вы ищете чистое решение CSS для этого?

— 27.03.2019 21:52

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

— 27.03.2019 21:52

css line

27.03.2019 21:29

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

422

Ответы 2

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

.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>

27.03.2019 21:44

Я пишу 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>

27.03.2019 21:55

Другие вопросы по теме

Рисование на холсте Tkinter: без атрибута «Создать»

NSAttributed Text с линией и некоторым углом в iOS

Пропускать пустые строки для рисования диаграммы

Как найти первую пустую строку и удалить ее в файле с помощью регулярного выражения команды sed

Линия Java Bresenham в точки на окружности

Как автоматически рисовать линию, читая координаты из файла?

Как интегрировать Chart.js с Angular 7 с данными из базы данных

Найдите площадь между двумя кривыми отдельно в numpy

Добавление пустых строк к абзацам в Linux

Иметь тег span innerHTML без разрыва строки

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

Ответы 2

Другие вопросы по теме

Похожие вопросы