Question 174081 in CSS Question posted in
Some basic documentation can be found here.

Css – What's the easiest way to create horizontal and vertical arrows in components in React?

A horizontal line can be created simply by something like this:

<hr style={{ width: "80%", border: "1px solid black" }} />

We can adjust the width, length etc.

If I want to show an arrow pointing towards right direction instead of line, what’s the best way to do that (Obviously with some customisation available like width, length, color, etc.)?

arrow image

There are a lot of libraries available, but almost all of them require giving two components and it draws from one component to another.

If instead of the line definition, I replace it arrow component, it should show an arrow like in the image. This seems like a fairly simple request, but I couldn’t find any such methods.

Tags:

2

Answers


  1. 0

    A simple solution with SVG:

    <svg width="300" height="20">
  <path d="M 0,10 H 300 L 290,0 M 300,10 L 290,20" fill="none" stroke="black" />
</svg>
    Login or Signup to reply.
  2. 0

    You could add an ::after element to the <hr> that will add the arrow:

    const CustomHR = () => <hr className='customHR' />;

ReactDOM.render(<CustomHR />, document.getElementById("react"));
    .customHR { 
   margin-top: 50px;
   width: 80%;
   border: 1px solid black;
}

.customHR::after {
    content: '';
    position: absolute;
    right: 10%;
    display: block;
    border-right: 3px solid;
    border-bottom: 3px solid;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%) rotate(-45deg);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search