How to mark up the arrow?

How to mark up this element?
5e27f3de142db119894780.png
April 4th 20 at 13:17
6 answers
April 4th 20 at 13:19
Solution
April 4th 20 at 13:21
Solution
April 4th 20 at 13:23
Solution
The easy, clean and good solution to use SVG...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon__arrow">
<path class="icon__arrow__fill" d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5 z"/>
</svg>


.icon__arrow {
width: 50px;
height: 50px;
}

.icon__arrow__fill {
fill: black;
}


Don't be carried away by such methods create elements in CSS, if this is for SVG.
https://codepen.io/topicstarter/pen/wvBRELE so probably less code mm ? - Judy_Runolfss commented on April 4th 20 at 13:26
@Judy_Runolfss, so Yes =)) I Have a habit of just all hang classes to access the elements directly using CSS and JS :)

And about this:
d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5 z"
don't pay attention to this :) - vella_Hermann2 commented on April 4th 20 at 13:29
@vella_Hermann2, I do not mean class in the sense of hands is easier - there is not difficult like - Judy_Runolfss commented on April 4th 20 at 13:32
@Judy_Runolfssagree)) but when working hard, you forget about simple ways of solving problems...)) - vella_Hermann2 commented on April 4th 20 at 13:35
April 4th 20 at 13:25
Solution
To use SVG
on css too, so it seems to be possible to impose - fernando_Wunsch commented on April 4th 20 at 13:28
@fernando_Wunsch, well, of course it is possible to make a square div and 4px border as well and need to hide - let's say a border-top and border-left to transformirovat at 45gr and all - Judy_Runolfss commented on April 4th 20 at 13:31
April 4th 20 at 13:27
Solution
Yes, the options are galore. Depends on your imagination.

You can make two pseudo-elements ::before, ::after Setting the right position, transform-rotate and border (or width\height + background-color).

From one (pseudo)element. Make a box, set the border of two adjacent sides, not the full profit. In this case, may not be able to complete a beautiful fillet all corners of the arrows.

You can hard set the block size to hide overflow, stuff the inside of the block letter "K" and choose the appropriate font size to remain visible only so much for "arrow" :-D

SVG\Canvas not offered as tag CSS :-)
April 4th 20 at 13:29
Solution
A why did it impose? If in svg it will take less than css. And indeed, in principle there is no need to impose icons

Find more questions by tags Layout