2
Wie würde ich einen Pfeil mit nur html und CSS so programmieren?
Wären die abgerundeten Ecken auch möglich? Vielen Dank!
A
Antwort
1
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;
}
1
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;
}
+0
Ist es möglich, abgerundete Kanten zu haben? –
+0
Testen Sie diesen Link: https://jsfiddle.net/IA7medd/4ytapoqh/ –
0
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>
1
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>
1
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;
}
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 –