J'utilise CSS pour essayer de dessiner une ligne verticalement, j'ai même essayé d'utiliser float:left penser que ce serait possible, mais cela le dessine horizontalement. Qu'est-ce que je fais mal ici?

        .process {
            margin: auto;
            max-width: 1080px;
        }


         #line {
            width: 80%;
            margin: auto;
            background: #eee;
            height: 6px;
            position: absolute;
            left: 10%;
            top: 57px;
            z-index: 1;
            border-radius: 50px;
            transition: all ease 0.9s;
        }

         #line-progress {
            content: " ";
            width: 3%;
            height: 100%;
            background: #207893;
            background: linear-gradient(to right, #207893 0%, #2ea3b7 100%);
            position: absolute;
            z-index: 2;
            border-radius: 50px;
            transition: all ease 0.9s;
        }
<div class="process">
            <div id="line">
                <div id="line-progress"></div>
            </div>
        </div>
css
0
jay.mila 4 mai 2021 à 11:38

1 réponse

Meilleure réponse

La méthode simple consistant à effectuer la barre de progression verticalement, consiste à basculer les propriétés de largeur avec des propriétés de hauteur et à commuter le dégradé de to right à to bottom

.process {
            margin: auto;
            max-width: 1080px;
        }


         #line {
            width: 6px;
            margin: auto;
            background: #eee;
            height: 80%;
            position: absolute;
            left: 10%;
            top: 57px;
            z-index: 1;
            border-radius: 50px;
            transition: all ease 0.9s;
        }

         #line-progress {
            content: " ";
            height: 3%;
            width: 100%;
            background: #207893;
            background: linear-gradient(to bottom, #207893 0%, #2ea3b7 100%);
            position: absolute;
            z-index: 2;
            border-radius: 50px;
            transition: all ease 0.9s;
        }
<div class="process">
            <div id="line">
                <div id="line-progress"></div>
            </div>
        </div>
2
GAMELASTER 4 mai 2021 à 08:50