How to create an Arrow using styled-components

Question

i'm trying to make my Orange arrow look like the Pink arrow without having to use an external CSS library like bulma, the pink arrow is using that library , which is why it looks like that.

The code for the pink arrow is exactly identical to the one i shared below, the only difference is that they have bulma css included in their sass file.

I am using styled components

export const Prompt = styled.span`
  background-color: ${({ theme }) => theme.colors.orange};
  color: #000000;
  padding: 0 0.5rem;
`;

export const Triangle = styled.span`
  width: 0px;
  height: 0px;
  border-top: 0.75rem solid transparent;
  border-bottom: 0.75rem solid transparent;
  border-left: 0.75rem solid ${({ theme }) => theme.colors.orange};
  padding-right: 0.5rem;
`;

usage :

<Prompt />
<Triangle />

Answer 1

Try using this and see if it works. Pretty simple css but it's almost identical to the pink arrow in your question.

#arrow {
    width:100px;
    height:40px;
    background:pink;
    margin-left:40px;
    position:relative;

    
}
#arrow:before {
    content:"";
    position:absolute;
    border-bottom: 20px solid transparent;
    border-left: 20px solid pink;
    border-top: 20px solid transparent;
    height: 0px;
    width: 0px;
    margin-left:100px;
}

<div id="arrow"></div>

Edit:

import styled, { ThemeProvider } from "https://cdn.skypack.dev/[email protected]";
import { color, space, layout, typography, compose, variant } from "https://cdn.skypack.dev/[email protected]";
import * as React from "https://cdn.skypack.dev/[email protected]";
import * as ReactDOM from "https://cdn.skypack.dev/[email protected]";

const theme = {
  colors: {
    orange: '#ff6600',
    green: '#a9dd9d',
    yellow: '#fedf81',
    blue: '#86acd7',
    purple: '#e7d5ff',
    cyan: '#a8d2eb',
    white: '#ededed',
    gray: '#ababab',
  },
  sizes: {
    small: '    1.75rem',
  },
};

const Prompt = styled.span`
  background-color: ${({ theme }) => theme.colors.orange};
  width: 4.5rem;
  height: 1.5rem;
  position: absolute;
`;

const LevelLeft = styled.div`
  margin-top: 1rem;
  width: 100%;
`;

 const Triangle = styled.span`
  position: absolute;
  border-bottom: 0.77rem solid transparent;
  border-left: 1rem solid ${({ theme }) => theme.colors.orange};
    margin-top:-0.5px;
    margin-left:72px;
  border-top: 0.77rem solid transparent;
  height: 0px;
  width: 0px;
`;

ReactDOM.render(
    <ThemeProvider theme={ theme }>
        <LevelLeft> 
                 <Prompt>~info</Prompt>
                    <Triangle />
        </LevelLeft>
    </ThemeProvider>, 
    document.getElementById('root')
);

body {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
}

#root{
    
    transform: scale(2);
    text-align:center;
    font-size:14px;
    line-height:24px;
}

<div id='root'></div>