边框线底部弯曲顶部直

Question

我想在零件之间画一条曲线，就像这里一样。因为如果我现在尝试弯曲我的边界线，顶部也会弯曲。我使用nuxt.js和tailwind作为css。我还没有完成代码，但你可以看到我想要的行在哪里。我也在检查如何把照片放在正确的地方。

代码

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

Answer 1

您可以访问figma.com

1. 使用笔工具

2. 创建所需的形状/线条。

3. 然后右键单击形状/线条Copy as SVG

4. 将其粘贴到代码中。

由于它是SVG代码，您可以将CSS应用于它，并根据您的意愿使用