score:1
as drew reese mentioned "this only works if the content is the same on both sides of the divider." so probably you should make the structure of your box like:
<div>
<div style="flex:1;"></div>
<span class="separator"></span>
<div style="flex:1;"></div>
</div>
below you will find correction for your arrow. i used border instead of background to make arrow as you wish and then centered it using left: 50%;
and transform: translate(-50%, -50%) rotate(225deg);
code:
.box::after {
content: "";
width: 8px;
height: 8px;
position: absolute;
background-color: white;
top: -1px;
left: 50%;
/*border-left: 8px solid;*/
border-left-color: #fff;
border-bottom: 1px solid black;
border-right: 1px solid black;
transform: translate(-50%, -50%) rotate(225deg);
}
output:
Source: stackoverflow.com
Related Query
- How to create a div with arrow and divider for content such that they are aligned using react and css?
- REACT: How to create a reusable custom hook with functions and effects that can change & react to changes in a host component's data
- How can I pass default theme that is provided by MUI5 and create a style for any component in MUI5?
- How to Create 3(country,state and city) dropdowns that populates data with each other in react js
- How to redirect to a url along with a component in react such that props passed to the component are not lost
- How to create a generic arrow function with react and typescript
- Trying to create React component with textarea that auto expands and shrinks based on content height (with Sandbox)
- How to have fixed table headers that are aligned with the rows? reactjs, nodejs
- How to hide a parent div and replace it with another div when user clicks on a button that is a children of the parent div?
- How to create an admin route and another private route for registered users with a normal route?
- How to send react app to client with express when you have routes that are authenticated and some that are not?
- How to create a vertical divider with a <hr> tag that can dynamically adjust its height relative to the element to the left?
- How to create a local react library project with common components, and import that project locally
- How to Create Middleware for refresh token in Reactjs with axios and redux
- How to do a foreach for an array with values that have to match specific key and the same value from another array
- How to create an input formfield with button that uploads a file using react and javascript?
- React: How to render same page that includes multiple components and forms for 2 types of user with different permissions?
- How to assign arrays student's id with Boolean value in react js and if i clicked on button again back to boolean value for that particular student
- Loop through Object which has Array as value and create div for each key with its value as information
- How to create a " box with arrow edges in the bottom and placing textinput under the arrow edges" using css
- How to create a different random number for every single div with React on onclick event?
- How to create epic that emits another one and at the same time listens for its end only once and until it fails?
- How to listen for click events that are outside of a component
- How to wait for AJAX response and only after that render the component?
- How do react hooks determine the component that they are for?
- How to create forms with React and Rails?
- React Router with - Ant Design Sider: how to populate content section with components for relevant menu item
- React, Jest and Material-UI: How to test for content rendered in a modal or popover
- How to integrate PWA with Next.js to allow for notifications and push notifications
- how to change hover for all elements ( border, text and arrow ) in react-select?
More Query from same tag
- How to get the selector working on a trivia game in React?
- CloneButton on DataGrid goes to edit page
- Material UI React Table Pagination
- Unable to Add onClick / Event Listener to a ListItem in MaterialUI
- Avoid duplicated codea and extract this functionality
- React-Router: Why does pushing to history change my url?
- webpack TTF loader not loading the fonts
- How to fix Failed to set the 'value' property on 'HTMLInputElement' for react?
- React.js setState not working
- How to sort a nested object based on key name
- Render Components in React by for loop
- Adding and removing active class from elements
- Routing from one component to another in React
- React Redux not re-rendering when Store changes
- Server Error Error: Invalid hook call. Hooks can only be called inside of the body of a function component in _app.js
- How to fix error: Unhandled Rejection (TypeError): meetups.map is not a function
- React timer hanging on :00 (state not updating)
- React props normalization or computed property
- apply multiple filters react
- How to test if iframe exists with React testing library?
- css flex-box contains space for an extra inner element
- Map function renders first react element differently while using tailwind's utility classes
- Grommet integration with create-react-app
- React bootstrap - how to make navBar with 100vh height when in mobile
- Add CSS for html selector based on React state?
- Do not mutate state directly. Use setState() react/no-direct-mutation-state
- In MobX how to reference an observable from StoreB that is in StoreA
- Access props from selector's resultFunc
- Axios client with useSwr Fails to make request
- React Adding tooltip and name to Sunburst