Wie würde ich einen Pfeil mit nur html und CSS so programmieren?

Wären die abgerundeten Ecken auch möglich? Vielen Dank!

2016-05-12 Cobalt lee

warum nicht SVG-Datei. warum willst du es nur mit html und css machen? –

Der Dienst, den ich verwende, erlaubt mir nicht, SVG-Dateien zu verwenden –

Könnten Sie den SVG-Code nicht direkt in das Dokument einfügen? Ich denke, dass jede CSS-Methode wird wahrscheinlich ein bisschen scharf scharf aussehen –

Pfeil mit abgerundeten Ecken https://plnkr.co/edit/5Zid5EKLY3x8yOOipiJp?p=preview

wie diese wird

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

Quelle

2016-05-12 15:52:10

wir vor und nach der Verwendung wird auf den Pfeil zu zeichnen, können Sie beispielsweise hier sehen können: https://jsfiddle.net/IA7medd/2zrgww4f/

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

und die CSS

.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; 
}

Quelle

2016-05-12 15:48:48

Ist es möglich, abgerundete Kanten zu haben? –

Testen Sie diesen Link: https://jsfiddle.net/IA7medd/4ytapoqh/ –

Hier ist ein Svg

alternative

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

Quelle

2016-05-12 16:00:16

Ich mag SVG mich so werde ich dies auch in den Ring werfen, können Sie SVG mit CSS steuern, wie man erwarten würde.

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

Quelle

2016-05-12 16:02:33

können Sie border-radius verwenden.

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

Quelle

2016-05-12 16:14:04

Wie würde ich einen Pfeil mit nur html und CSS so programmieren?

Antwort

Verwandte Themen