Блог

Главная - Вопросы по программированию - каков наилучший способ рисования на HTML

каков наилучший способ рисования на HTML

#html #jquery #css #responsive-design #drawing

#HTML #jquery #css #адаптивный дизайн #рисование

Вопрос:

Я пытаюсь создать этот дизайн, используя HTML, CSS и jQuery.

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

Я попытался экспортировать строку из дизайна и поместить ее в виде img следующим образом :

    <div class="container-fluid">
        <div class="row">
            
            <div class="col-lg-6 d-flex flex-column justify-content-center align-items-center">
                <div class="yellow-circle d-flex justify-content-center align-items-center ">
                    <h1>1</h1>
                </div>
                <div class="w-75 text-center"> 
                <h1 class="text-center">Tell Us How Much Debt You Are Facing</h1>
                <p>Call us or fill out our online form to receive a free, no obligation consultation.</p>
            </div>
            </div>
            <div class="col-lg-6">
                <img class="step-1" src="./Assest/step1.png" alt="">
            </div>
        </div>
        <img class="line-1" src="./Assest/Vector 6.svg" alt="">
        </div>

и css :

 .line-1{
    position: absolute;
    left: 560px;
    top:1500px
}

но это не похоже на дизайн, есть ли какой-нибудь хороший способ сделать так, чтобы это было точно похоже на дизайн?

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

1. Возможно, холст, я не совсем уверен. Но вы можете научиться этому здесь, на холсте w3school . Но вы также можете использовать SVG и рисовать его в Illustrator без какого-либо кодирования.

2. Вы смотрели на источник примера, чтобы увидеть, что они сделали?

Ответ №1:

Я не совсем понимаю, какую часть оригинала вы пытаетесь воспроизвести, но для самой строки SVG может быть хорошим вариантом.

Вот что я сделал, обведя линию векторным инструментом в Sketch, затем экспортировал ее в формате SVG, затем открыл этот файл в текстовом редакторе и добавил его в HTML

https://codepen.io/panchroma/pen/XWNgJKv

Вы могли бы сделать то же самое в Illustrator или других инструментах графического дизайна.

 <svg height="517" viewBox="0 0 521 517" width="521" xmlns="http://www.w3.org/2000/svg"><path d="m519.71875.9296875c-24.996094 14.375-96.300781 64.5976563-161.679687 79.421875-16.68553 3.7833294-50.711459 5.7927067-90.258164 4.2798491-65.61229-2.5099956-148.120463-9.5422982-204.3392194 3.7818232-42.6675685 10.1124233-66.23833205 41.9247342-60.6682421 70.4383282 17.3327833 88.72746 94.5507813 59.976562 123.9804685 65.992187 29.429688 6.015625 97.349086-9.289457 138.398246 56.874251 12.778161 20.596049 9.756603 48.326497-3.666131 82.628183-6.806966 17.395144-16.288831 36.480232-27.74153 57.181818-9.541433 17.246832-21.090378 49.070832-34.646835 95.471998" fill="none" stroke="#2a3287" stroke-dasharray="5" stroke-width="2"/></svg>