如何使用樣式組件創建箭頭

我試圖讓我的橙色箭頭看起來像粉色箭頭，而不必使用像 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 />

uj5u.com熱心網友回復：

嘗試使用它，看看它是否有效。非常簡單的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>

uj5u.com熱心網友回復：

可以使用 ::pseudo-element 和邊框制作形狀，下面的代碼可能會對您有所幫助。

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

標籤：css 下一个.js 样式化组件

上一篇：為什么在這種情況下px和em表現不同？

下一篇：鏈接<a>在displayflex中有100%的寬度，<button>沒有