html - CSS Arrowhead down arrow -


I have a lot of trouble in designing how I want this arrow.

Now I'm stuck with a solid triangle and I want to change it to "hairline" arrow, like:.

  .hairline-down-arrow {border: 1 px solid black; Limit-Radius: 50%; Width: 65px; Height: 65px; Background color: white; } .hairline-down-arrow: {content: ""; Status: Relative; Top: 44px; Left: 15px; Border-top: solid 25px black; Border-right: solid 15px transparent; Border Bottom: Solid 25px Transparent; Border-left: solid 15px transparent; }  
  & lt; Section square = "hairline-down" & gt; & Lt; Div class = "hairline-down-arrow" & gt; & Lt; / Div & gt; & Lt; / Section & gt;       

Any help? Thank you.

Why not just use a svg ?

  & lt; Svg width = "70" height = "55" visible box = "- 2.5 -575 60" protected AspectRatio = "none" & gt; & Lt; Path d = "M0,0 l35,50 l35, -50" fill = "none" stroke = "black" stroke-line cap = "round" stroke-width = "5" /> & Lt; / Svg & gt;         

Or you can use it: pseudo-element.

  Div {status: relative; Width: 80px; Height: 1px; Background: black; Conversion: to rotate (55 degrees); Change-Origin: 0% 0%; } Div: after {content: ''; Status: Completed; Width: 100%; Height: 100%; Bottom: 0; Left: 100%; Background: black; Conviction (-110 degree) to rotate; Change-Origin: 0% 100%; }  
  & lt; Div & gt; & Lt; / Div & gt;  


Comments

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

html - CSS autoheight, but fit content to height of div -

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -