-4

I want to make a curved line between parts like here. Because if I now try to curve my borderline, the top also curves. I use nuxt.js and tailwind for css. I did not finish the code yet, but you can see where I want the lines. And I'm also checking how I will get the pictures in the right place.

Code

<template>
    <div class="bg-gray-100 h-auto">
        <div class="lg:mx-32 xl:mx-60 h-96 w-auto text-blue-900">
            <div class="py-20">
                <h3 class="text-4xl font-bold text-center">Nuestro proceso de Check-in</h3>
            </div>
            <h1 class="font-bold text-7xl text-gray-300 ml-10">1</h1>
            <div class="relative border-l-2 border-b-2 border-dashed rounded-xxl border-blue-900 w-1/2">
                <div class="m-10">
                    <h3 class="text-3xl font-bold items-end col-start-1 row-start-2 h-auto"><u>Escanea</u> el
                        documento<br>del viajero</h3>
                    <p class="col-start-1 row-start-3">
                        Con solo escanear el código MRZ ubicado en la parte inferior
                        del DNI o Pasaporte del viajero, nuestra app registra al
                        instante todos sus datos personales.
                    </p>
                </div>
            </div>
            <div class="relative w-1/2">
                <!-- <div class="layer0 bg-contain bg-no-repeat h-full w-2/3" :style="passport"></div>
                <div class="layer1 bg-contain bg-no-repeat h-full w-2/3" :style="phone"></div> -->
            </div>
            <div class="relative grid grid-cols-2 grid-rows-5 h-96 w-auto">
                <div class="absolute border-r-2 border-dashed rounded-xxl border-blue-900 bg-contain bg-no-repeat h-full w-1/2 row-span-4"
                     :style="sign"></div>
                <div class="col-start-2 ml-5">
                    <h1 class="font-bold text-7xl text-gray-300 col-start-2 row-start-1">2</h1>
                    <h3 class="text-3xl font-bold items-end col-start-2 row-start-2 h-auto"><u>Firma</u> del huésped
                    </h3>
                    <p class="col-start-2 row-start-3">
                        Una vez escaneado su documento, completa el registro
                        con la firma digital de tu huésped, usando su
                        dedo o un puntero
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
    .layer0 {
        position: relative;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .layer1 {
        position: absolute;
        top: 0;
        left: 62%;
        z-index: 1;
    }
</style>

<script>
    export default {
        components: {},
        data() {
            return {
                passport: {backgroundImage: "url(passport.png)"},
                phone: {backgroundImage: "url(phone_scan.png)"},
                sign: {backgroundImage: "url(sign.png)"}
            };
        }
    }
</script>
Karl Hill
  • 12,937
  • 5
  • 58
  • 95
Sam
  • 1
  • 1
  • 1
    Pls include the code here or else how will we solve your problem? – Archit Gargi Mar 08 '22 at 11:23
  • This should help you put code into your question https://stackoverflow.com/help/minimal-reproducible-example We need to know how you are positioning things so show the HTML and the CSS - for example, are you using grid? – A Haworth Mar 08 '22 at 11:24

1 Answers1

-2

You can go to figma.com

  1. use the pen tool

  2. create the shape/lines you want.

  3. then right click the shape/lines Copy as SVG

  4. paste it in your code.

As it is as SVG code you can apply CSS to it and use it how ever you want

Abhishek Kokate
  • 450
  • 2
  • 11