How to create an Arrow using styled-components-CodePudding

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 />

CodePudding user response：

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>

CodePudding user response：

Its possible to make shapes using ::pseudo-element and border, Below code may help you.

  .arrow
        {
          display:block;
          position: relative;
          padding:15px 20px;
          background:#FF6600;
          width:auto;
          float:left;
        }
        .arrow:after
        {
         content: '';
            position: absolute;
            right: -25px;
            top: 0px;
            width: 0px;
            height: 0px;
            border-top: 22px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 25px solid #FF6600;
        }
        p
        {
          line-height:12px;
          margin:0px;
          font-weight:bold;
          color:#000;
          font-size:18px;
        }

<div >
                  <p>~/info</p>
                </div>