如何使用样式组件创建箭头

Question

我试图让我的橙色箭头看起来像粉红色箭头，而不必使用像 bulma 这样的外部 CSS 库，粉红色箭头正在使用该库，这就是它看起来像这样的原因。

粉红色箭头的代码与我在下面分享的代码完全相同，唯一的区别是它们的 sass 文件中包含 bulma css。

我正在使用样式组件

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;
`;

用法：

<Prompt />
<Triangle />

Answer 1

尝试使用这个，看看它是否有效。非常简单的CSS，但它几乎与你问题中的粉红色箭头相同。

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

编辑：

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>

Answer 2

可以使用 ::pseudo-element 和 border 来制作形状，
下面的代码可能会帮助你。

  .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 class="arrow">
                  <p>~/info</p>
                </div>