Comment est-ce que je pourrais coder une flèche comme celle-ci avec juste le html et le CSS?

Est-ce que les coins arrondis peuvent également être possibles? Je vous remercie!

2016-05-12 Cobalt lee

pourquoi ne pas utiliser le fichier SVG. pourquoi voulez-vous le faire en utilisant seulement html et css? –

Le service que j'utilise ne me permet pas d'utiliser les fichiers svg –

Ne pourriez-vous pas mettre le code svg directement dans le document? Je pense que toute méthode css va probablement avoir l'air un peu tranchant –

flèche avec des coins arrondis https://plnkr.co/edit/5Zid5EKLY3x8yOOipiJp?p=preview

<body> 
    <h1>Hello Arrow!</h1> 

    <div class="square-div"> 
     <div class="arrow-p1"> 

     </div> 
     <div class="arrow-p2"> 

     </div> 
    </div> 
    </body> 

.square-div{ 
    width:80px; 
    height:80px; 
    background:orange; 
} 

.arrow-p1{ 
    background:green; 
    height:16px; 
    width:50px; 
    position:relative; 
    transform:rotate(45deg); 
    border-radius:8px; 
    top:22px; 
    left:10px; 
} 
.arrow-p2{ 
    background:green; 
    height:16px; 
    width:50px; 
    position:relative; 
    top:30px; 
    border-radius:8px; 
    transform:rotate(-45deg); 
    left:10px; 
}

Source

2016-05-12 15:52:10

nous utiliserons avant et après pour tirer la flèche, vous pouvez voir par exemple ici: https://jsfiddle.net/IA7medd/2zrgww4f/

<div class='arrow_box'></div>

et le css sera comme celui-ci

.arrow_box { 
     position: relative; 
    width: 72px; 
    height: 72px; 
    background:#FDB600; 
} 
.arrow_box:after, .arrow_box:before { 
    left: 50%; 
    top: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    margin-left: -15px; 
} 

.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-left-color: #FDB600; 
    border-width: 15px; 
    margin-top: -15px; 
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-left-color: #2A0C5B; 
    border-width: 30px; 
    margin-top: -30px; 
}

Source

2016-05-12 15:48:48

Est-il possible d'avoir des bords arrondis? –

tester ce lien: https://jsfiddle.net/IA7medd/4ytapoqh/ –

Voici un svg autre

<div class="svg"> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px" viewBox="0 -20 60 110" xml:space="preserve"> 
    <polyline fill="none" stroke="#000000" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" points=" 
    0.375,0.375 45.63,38.087 0.375,75.8 "/> 
    </svg> 
</div>

https://fiddle.jshell.net/oxpwy3wq/1/

Source

2016-05-12 16:00:16

J'aime moi-même du SVG donc je vais jeter ce dans le ring aussi, vous pouvez contrôler SVG de CSS que vous attendez.

.container { 
 
    display: inline-block; 
 
    background: orange; 
 
} 
 
.chev-right { 
 
    fill: purple; 
 
    height: 60px; 
 
    width: 60px; 
 
    padding: 5px 10px 5px 10px; 
 
}

<div class="container"> 
 
    <svg class="chev-right" viewBox="0 0 24 24"> 
 
    <g transform="scale(0.0234375 0.0234375)"> 
 
     <path d="M366.336 238.336c-33.323 33.323-33.323 87.339 0 120.661l152.96 153.003-152.96 153.003c-33.323 33.323-33.323 87.339 0 120.661 16.64 16.683 38.485 25.003 60.331 25.003s43.691-8.32 60.331-25.003l273.707-273.664-273.707-273.664c-33.28-33.323-87.381-33.323-120.661 0z" 
 
     /> 
 
    </g> 
 
    </svg> 
 
</div>

Source

2016-05-12 16:02:33

Vous pouvez utiliser rayon de frontière.

http://codepen.io/anon/pen/NNJQgM

<div class="arrow"> 
    <div class="rotate"> 
    <div class="top"></div> 
    <div class="left"></div> 
    </div> 
</div>

CSS:

.arrow { 
    position: absolute; 
    top: 100px; 
    width: 50px; 
    height: 50px; 
    background-color: #FEB165; 
} 
.arrow .rotate { 
    position: relative; 
    top: 10px; 
    left: -15px; 
    transform: rotate(135deg); 
} 
.arrow .rotate .top { 
    width: 30px; 
    height: 10px; 
    border-radius: 5px; 
    background-color: black; 
} 
.arrow .rotate .left { 
    position: relative; 
    top: -10px; 
    width: 10px; 
    height: 30px; 
    border-radius: 5px; 
    background-color: black; 
}

Source

2016-05-12 16:14:04

Comment est-ce que je pourrais coder une flèche comme celle-ci avec juste le html et le CSS?

Répondre

Questions connexes