Creating a centered arrow using CSS within boxes

Here is the CSS class that I have applied to my divs:

.rightarrow{
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 20px;
        border-color: transparent transparent transparent #aaaaa9;
    }

This is how my markup looks:

<!-- Tabs -->
<div id="tabs">
   <!-- tabs start  -->
   <div class="tab-content">
      <!-- part 1 Will execute 2 times as per filters-->
      <div role="tabpanel" class="tab-pane active" id="volkswagen">
         <div class="row">
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 1</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 2</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 3</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 4</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- End part 2 -->
</div>
</div>
<!-- ./Tabs -->

This is what I am seeing in terms of results: https://i.sstatic.net/2bbJ0.png

The current styles applied are as follows: https://i.sstatic.net/mQEQJ.png

I am looking to place these arrows in the middle, between the rectangular boxes. How can I achieve this?

Thanks

@Irina : This is how the output appears after implementing the styles you provided: https://i.sstatic.net/W4wtF.png

htmlcss

Answer №1

Controlling the movement of your arrow element is a breeze when you treat it like a pseudo element. Take a look at this example:

.col-xs-5ths:before {
  content: '';
  position: absolute;
  top: 50%;
  left: -28px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #aaaaa9;
  transform: translateY(-50%);
}
.col-xs-5ths {
  width: 20%;
  float: left;
  margin: 0 20px;
  padding: 10px;
  background: #ccc;
  min-height: 100px; /* just for demo */
  position: relative;
}
<div class="col-xs-5ths">test test test</div>    
<div class="col-xs-5ths">test</div>
<div class="col-xs-5ths">test test</div>

UPDATE: Here's an improved version:

.col-xs-5ths:nth-of-type(1):after,
.col-xs-5ths:nth-of-type(2):after,
.col-xs-5ths:nth-of-type(3):after,
.col-xs-5ths:nth-of-type(4):after {
  content: '';
  position: absolute;
  top: 50%;
  right: -31px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #aaaaa9;
  transform: translateY(-50%);
}
.col-xs-5ths {
  width: calc(20% - 40px);
  float: left;
  margin: 10px 20px;
  padding: 10px;
  background: #ccc;
  min-height: 100px; /* just for demo */
  position: relative;
}
<!-- Included bootstrap 3 css, depending on your version -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Tabs -->
<div id="tabs">
   <!-- tabs start  -->
   <div class="tab-content">
      <!-- part 1 Will execute 2 times as per filters-->
      <div role="tabpanel" class="tab-pane active" id="volkswagen">
         <div class="row">
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 1</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 2</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 3</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 4</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            ...
         </div>
      </div>
   </div>
   <!-- More content here -->
</div>
<!-- ./Tabs -->

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

Ensure that the Javascript file is included before the CSS file to prevent any margin

I have external files for JavaScript and CSS. According to This question, they suggested that including JavaScript before CSS could enhance performance. However, I noticed a discrepancy in Chrome when I load JS before CSS - the .offset() function returns a ...

jquerycssgoogle-chromeoffset

How to Perfectly Align a Gif

I'm trying to understand the functionality behind this code snippet. Can anyone shed some light on it? img{ display:block; margin:auto; } I attempted to center a gif using this code block after my teacher suggested trying align:center; without succe ...

htmlcssmargin

blurring out of an input field and a division element

I am currently working on creating a dropdown suggestion box that hides when the input field and dropdown box are no longer in focus. My HTML code: <input type="text" id="user_address"> <div id="user_address_sg">SUGGESTION</div> <di ...

javascriptjqueryhtmlcss

Using jQuery to submit data via POST method without having the page reload

I have a link in the footer that, when clicked, jumps to the header with a # in the address bar. Is there a way to prevent this and stay in the footer? Here is the code snippet: <a href="#" class="clickIn" id="1" attrIn="Like"><span style="color ...

javascriptjquerycssajax

Styles in NEXT.js are not loading properly due to issues with the Module

I have been attempting to apply module.css to one of my components by following the instructions provided in this tutorial https://nextjs.org/learn/basics/assets-metadata-css/layout-component. /*/components/Livestream/App.js*/ import styles from './A ...

javascriptcssreactjssassnext.js

Dynamically resizing a property in the DOM with Angular

Could someone help me with an issue I'm having regarding resizing items on the screen in Angular when the browser window size changes? Here is my code snippet: // TS File height: number = 2.5; objHeight:number; screenHeight:number = window.innerHeig ...

htmlangulartypescriptdomwindow-resize

Tips for emphasizing a row of various list boxes when hovering in asp.net

I am facing an issue with two listboxes on my website. Currently, I can only highlight one item at a time by mousing over the listbox. However, I would like to be able to highlight items in both listboxes simultaneously when I mouseover either listbox1 or ...

c#cssasp.net

How can I delete a video on mobile in WordPress?

Looking for some assistance with my webshop www.spidercatcher.dk. I'm trying to have a background video display only on PCs, while showing a still photo on phones and tablets. I've tried using a poster tag but I can't seem to scale it proper ...

htmlcsswordpresswoocommerce

Issue with Caching during Javascript Minification

I Have ASP.Net MVC 3 App. Utilizing YUICompressor.Net for compressing Javascript and CSS files post build with MSBuild. The minimized javascript file is named JSMin.js and the CSS file is CssMin.css. In my master page, I reference these files as shown bel ...

javascriptcssfileversionminify

Having trouble with your custom AngularJS directive not functioning correctly?

I am facing an issue with my custom directive implementation. I have a custom directive that contains a table which references a controller. The ProjectController part works fine when it is not included in the code, but as soon as I put everything into the ...

javascripthtmlangularjsangularjs-directive

Utilizing HTML and jQuery to load a dynamic URL within a div placeholder

I'm experiencing some difficulty with loading a custom URL. Essentially, the user will click on a series of navigation links that will dynamically load the relevant content in a tabbed bootstrap jumbotron. The navigation links vary based on data store ...

javascriptjqueryhtmldjangotwitter-bootstrap

Revert button design to default after second click

Looking for some assistance here. I have a button that toggles between displaying and hiding information. When the information is displayed, it should have one style, and when it's hidden, it should have another. Currently, I'm able to change the ...

htmlcssbutton

Trigger Javascript on 'Nearby' input from Html form

I have a JavaScript code that retrieves the latitude and longitude of users from their device for a local search. Although everything works correctly, I want to make sure the script is only executed if the user specifically selects "nearby" as the locatio ...

javascriptjqueryhtmlformsgeolocation

struggling to align menu items on both sides of a navbar

I am currently facing an issue with positioning elements in my HTML code. I have a File drop-down that I want to display on the left side, while the rest of the drop-downs should appear on the right side. It seems like my CSS files might be causing some in ...

htmlcssbootstrap-4navbar

transform ajax data into an array structure

I need to convert the values retrieved from an AJAX call into an array so that I can access and format them accordingly. $(document).ready(function() { $('#documenter_nav > li a').click(function(){ var url = $(this).attr('data- ...

htmlajax

CSS causing navigation bar drop down content to be hidden when hovering

I'm currently working on a drop-down menu and everything seems to be functioning properly. However, when I hide my drop-down block, it doesn't reappear on hover. Can someone help me identify the issue here? HTML-: <div id="nav_wrapper"> ...

htmlcss

Change the class of each item in a list individually by hovering over them with the mouse using JavaScript

How to toggle classes in a list item one by one using the mouseover event in JavaScript? const items = document.querySelectorAll("ul li"); let currentItem; for (const item of items) { item.addEventListener("mouseover", e => { currentItem &am ...

javascripthtmlcss

Can theme changes be carried over between different pages using Material UI?

I've encountered an issue with MUI 5.14.1 where I'm getting an error every time I attempt to save themes across pages using localStorage. Any suggestions on how to resolve this problem or recommendations on a different approach would be greatly a ...

javascriptcssmaterial-uimaterial-designthemes

What is the best way to showcase nested array information from a JSON file on an HTML webpage?

students.json { "students": [ { "studentname": "Rohit Kumar", "grade": "A", "student": [ { "SNo": "1", "Subject": "Maths", "Concept": "Numbers" }, { "SNo": "2", ...

javascripthtmljson

Tips on altering hover effects?

I am having trouble changing the font size and color of the a when hovering over p. I have been trying to figure this out for a while now, but I can't seem to get it to work. If anyone has any simple links related to this topic, I would greatly appre ...

htmlcsshover