Steps to designing an Arrow with styled-components

I am currently working on customizing my orange arrow to resemble the pink arrow, but I want to achieve this without relying on an external CSS library like bulma. The reason the pink arrow looks different is because it utilizes the bulma library in its styling.

Interestingly, the code for the pink arrow that I shared below is exactly the same as mine. The only distinction is that they incorporate bulma CSS into their sass file.

In my implementation, I am utilizing 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;
`;

To use these components:

<Prompt />
<Triangle />

https://i.stack.imgur.com/nAl4E.png

https://i.stack.imgur.com/oZPtV.png

cssnext.jsstyled-components

Answer №1

Give this a try and see if it does the job. The CSS is pretty straightforward, resembling the pink arrow you mentioned in your query.

#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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85f6f1fce9e0e1a8e6eae8f5eaebe0ebf1f6c5b0abb6abb6">[email protected]</a>";
import { color, space, layout, typography, compose, variant } from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6417101d08010049171d1710010924514a554a51">[email protected]</a>";
import * as React from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="deacbbbfbdaa9eefe9f0eef0ef">[email protected]</a>";
import * as ReactDOM from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d1f080c0e19400902002d5c5a435d435c">[email protected]</a>";

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

To create custom shapes using ::pseudo-elements and border, you can use the code snippet provided below:

  .custom-shape
        {
          display:block;
          position: relative;
          padding:15px 20px;
          background:#FF6600;
          width:auto;
          float:left;
        }
        .custom-shape: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="custom-shape">
                  <p>Your text here</p>
                </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The width of a div element seems to mimic the width of the entire page inexplic

There is a page containing various div elements. HTML: <div class="utilitiesHeader"> <div id="utilitiesLogo"></div> <div id="utilitiesFIO">Name of user</div> </div> <div class="utilitiesContent"> <d ...

htmlcss

Issue with TagCloud functionality when deployed on Vercel platform

Everything functions perfectly on my local machine, but once deployed to Vercel, the display disappears. I've double-checked the text, container, and TagCloud - all showing the correct responses. I even tried uninstalling and reinstalling TagCloud wit ...

typescriptnext.jsverceltag-cloud

When trying to access a view through a controller, the CSS is failing to apply properly

I'm having issues with CSS not working in my Codeigniter project, even when using the base_url() function. < link href="< ? php echo base_url(); ?> application/views/vehicle/css/bootstrap.min.css" rel="stylesheet" media="screen" /> ...

csscodeigniterbase-url

NextJS: When attempting to serialize the `function` as JSON, an error occurs as it is not a JSON serializable data type

In my Firestore database, I have a collection named "mentor" that contains documents with three fields: "name", "email", and "linkedin". My goal is to fetch all the documents from this collection and pass them as props so that I can render their fields on ...

javascriptfirebasegoogle-cloud-firestorenext.js

Is there a way to perform a nextAuth sign in using Postman?

I am currently working on implementing user authentication using NextAuth. The authentication works perfectly within my webapp, but now I want to test the sign-in functionality using Postman so that I can share the login endpoint. Below is the configuratio ...

javascriptnext.jsnext-auth

CSS style for centering double digit list items

My query is: <ul id="list"> <li> <a href=''>1</a> </li> <li> <a href=''>2</a> </li> <li> <a href=''>3</a> </li> <l ...

htmlcss

Is the CSS selector '.my-class *:not(input[type="text"])' accurate?

Is there a way to target all elements inside the DOM element with class "my-class" except for input elements of type text? I tried using the following CSS selector: .my-class *:not(input[type="text"]) { // Some CSS properties here } However, this do ...

htmlcsscss-selectors

What is the best way to showcase two SVG clocks on a single webpage?

The issue arises when combining the desktop and mobile versions of the clock script. The first clock works fine on its own, but upon duplicating another set of scripts for the second clock, it encounters display problems. I have appropriately labeled the c ...

javascripthtmlcsssvg

scrollable header within the confines of the container

I have been trying to find a solution for my scrolling issue, but I just can't seem to get it right. I want the content within a div to scroll inside its container without affecting the header. Here's the updated JSFiddle link with the jQuery cod ...

htmlcss

Learn how to utilize the Page props in the getServerSideProps method with Next.js

I have passed some properties to the _app page. <PageWrapper> <Component someProps={someProps} /> <GlobalCSS /> </PageWrapper> Can these props be accessed in the getServerSideProps method on each individual Page? export const g ...

javascriptnext.js

What method can I use in webpage coding to achieve this special highlight effect, and what is the official term for it?

Need help figuring out how to make an icon change from blue to white when selected. I've searched through Bootstrap, CSS, and HTML, but haven't found the solution yet. Any suggestions would be appreciated! https://i.stack.imgur.com/RK1PD.png ...

javascripthtmlcsstwitter-bootstrap

Analyzing neglected CSS in intricate websites

While there are tools available to identify unused CSS on static web pages, real-world scenarios often involve CSS being used dynamically after interactions such as opening modals or popups. How can we effectively manage our ever-growing render-blocking CS ...

htmlcss

Balanced Columns with Background Extending Beyond Half of the Page

If you're looking for the final code, it can be found here: http://jsfiddle.net/asaxdq6p/6/ I am attempting to create an effect similar to this image: To achieve this, I am using the Equal Height Columns with Cross-Browser CSS trick as described in ...

htmlcssbackgroundfluid-layout

Having trouble dividing an HTML file?

Currently, I am working on creating a very basic web page that is divided into two parts. Each part will have its own HTML file: Welcome.html & Welcome.css: <html> <head> <link rel="stylesheet" type="text/css" href="Welcom ...

javascripthtmlcssnode.js

Is there a way for me to showcase the number of items in my shopping cart on all pages within my React/Next.js app?

I have been struggling with a persistent issue in my nextjs eCommerce application for over a week now. The project is part of a web dev BootCamp that I am currently enrolled in, and I need to submit it by the end of this week. The problem revolves around t ...

reactjsreact-hooksnext.jsstatereact-props

When calling useRouter query within getServerSideProps, it may return as undefined

Utilizing the useRouter method to retrieve user data from the query, I am able to view this information in HTML form. However, upon passing the search parameter within the getServerSideProps function, it consistently returns as undefined. function Sea ...

reactjsnext.js

process.cwd() Varying paths in different operational environments

I am currently utilizing Next.js version 14. Within each page folder, there is a file named meta.md, which I access using fs. The content of these files is as follows: const postsDirectoryPath = process.cwd(); In the development environment, the files ar ...

next.jsvercel

I am unable to utilize autocomplete with types that are automatically generated by Prisma

Currently, I am working on a project utilizing Next and Prisma. Within my schema.prisma file, there are various models defined, such as the one shown below: model Barbershop { id String @id @default(uuid()) name String address String ...

typescriptnext.jsprisma

Modifying the appearance of Bootstrap button colors

I recently came across this code on the Bootstrap website. I am curious about how to change the text color from blue to black in this specific code snippet. Currently, the text is appearing as blue by default. For reference and a live example, you can vis ...

javascriptjqueryhtmlcsstwitter-bootstrap

Stop unwanted scrolling upwards by using jQuery ajax function $.load

I'm currently in the process of creating an ajax chat using jquery and php. Everything seems to be running smoothly except for one issue related to scrolling. Essentially, I've implemented a time-out function that automatically reloads the inner ...

javascriptphpjquerycssajax