Place an arrow before and after a div tag

Struggling to add an arrow shape to both the front and end of a div with only one class? Is it achievable?

https://i.sstatic.net/cfUbB.png

edit: my answer to the question with a different approach using shapes:

.arrow {
  margin-left: 100px;
  position: relative;
  background: pink;
  width: 400px;
  height: 100px;
  text-align:center;
  line-height:100px;
  margin-bottom:10px;
}

.arrow:after {
  border: solid transparent;
  content: " ";
  position: absolute;
  border-bottom-color: white;
  border-width: 50px;
  left: 0;
  top: 0;
  transform: rotate(90deg);
}

.arrow:before {
  border: solid transparent;
  content: " ";
  position: absolute;
  border-bottom-color: pink;
  border-width: 50px;
  left: 400px;
  top: 0;
  transform: rotate(90deg);
}
<div class="arrow">
  1
</div>
<div class="arrow">
  2
</div>

htmlcsscss-shapes

Answer №1

To create the left arrow, you will need to use an inner element of your choice. In this example, a <span> element is utilized.

.arrow {
  float: left;
  width: 128px;
  height: 50px;
  background-color: white;
  border: 1px solid green;
  position: relative;
  margin-right: 40px;
  text-align: center;
  border-left: none;
}

.arrow:after,.arrow span:after  {
  content: '';
  position: absolute;
  top: 0px;
  left: 128px;
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-left: 12px solid white;
  z-index: 2;
}

.arrow:before,.arrow span:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 129px;
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-left: 12px solid green;
  z-index: 1;
}
.arrow span:after {
  left: 0;
}

.arrow span:before {
  left: 1px;
}
<div class="arrow"><span></span>1</div>
<div class="arrow"><span></span>2</div>
<div class="arrow"><span></span>3</div>
<div class="arrow"><span></span>4</div>
<div class="arrow"><span></span>5</div>

Answer №2

I have customized a chevron shape based on the inspiration from this website: https://css-tricks.com/examples/ShapesOfCSS/ (credit to mr Anthony Ticknor for the idea!)

.chevron {
  position: relative;
  text-align: center;
  height: 60px;
  width: 260px;
  line-height:60px;
 
 margin-bottom:10px;

}

.chevron:before {
   content: ''; 
   position: absolute; 
   top: 0; 
   left: 3%; 
   height: 50%; 
   width: 100%;
  
    transform: skew(25deg, 0deg);
    border:1px solid red;
    border-bottom:none;
}

.chevron:after {
   content: ''; 
   position: absolute; 
   top: 50%; 
   left: 3%; 
   height: 50%; 
   width: 100%;
   
    transform: skew(-25deg, 0deg);
       border:1px solid red;
    border-top:none;
}
<div class="chevron">1</div>
<div class="chevron">2</div>

This design involves one main div element and two pseudo-elements that are properly skewed with hidden borders where necessary.

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

Ways to assign a boolean value to HTML using Angular?

Can someone help me set the initial value of showProduct to false for the app-product HTML selector? showProduct:boolean = false; <button (click)="showProduct=!showProduct">Show Product</button> <div *ngIf="!showProduct"> <app-p ...

htmlangulartypescriptboolean

Utilizing a function within a loop that is nested within another loop

//Exercise 3a: for (var a=1; a<12; a++) { for (var b=00; b<60; b++) { for (var c=00; c<60; c++) { console.log(a + ':' + b + ':' + c + 'AM'); } } } for (var alpha=12; alpha<13; al ...

javascripthtmlcssfunctionloops

Expanding all cards in a Bootstrap collapse when one is clicked

Hello, I am currently working on integrating bootstrap collapse into a section of my django application. Here is the code snippet that I have implemented so far: {% extends 'base.html' %} {% block content %} <div class="container"> & ...

htmlcssdjangobootstrap-4jinja2

Is there a way to trigger two distinct CSS transitions simultaneously with a single click?

Below is a script that rotates two images in opposite directions when clicked. One image spins clockwise while the other spins counter-clockwise. The challenge is that each image requires an individual click to rotate. My goal is to make both images rotate ...

jquerycss

Refresh the NodeJS page without resending user data

I am facing an issue with my Node Js local server and multiple identical html pages. Each page contains user input fields that are saved on a text file. The problem arises when users refresh the page, as the data from the previous page is sent and saved ag ...

htmlnode.js

Toggle the operational status of the bootstrap switch

Does anyone have a solution for customizing the appearance of the Bootstrap switch button when it is disabled? I have successfully styled it for the enabled state, but it defaults to a dark appearance when disabled. I would like the disabled state to have ...

cssinputfrontendswitch-statementbootstrap-5

What is the best way to store objects in files using Node.js?

As I manage my Node server, a question arises - what is the best way to convert objects into a serialized format and save them to a file? ...

javascripthtmlnode.js

"Implementing Python code to dynamically add a class to HTML based on specific conditions

Here is the code snippet I'm currently using for the header section across all templates on my website. I include it in each template using the following line of code: {% include 'header.html' %} I am working on a way to add the class "acti ...

htmldjangodjango-templatesjinja2

Positioning the navigation menu in the center

I'm facing a bit of trouble trying to center a navigation bar on my Blogger site. Usually, this is a simple task, but for some reason, it's proving difficult this time around. Feel free to check out the website in question: Center Navigation I& ...

htmlcssmenunavigationcenter

Transmit data from an HTML form to PHP using JSON

I am attempting to utilize JavaScript to send POST data. I have the data in an HTML form: <form name="messageact" action=""> <input name="name" type="text" id="username" size="15" /> <input name="massage" type="text" id="usermsg" si ...

javascriptphpjqueryhtmljson

I'm looking for a way to retrieve an object from a select element using AngularJS. Can

I am working with a select HTML element that looks like this: <select required="" ng-model="studentGroup"> <option value="" selected="">--select group--</option> <option value="1">java 15-1</option> <option value="2">ja ...

javascripthtmlangularjs

a non-breaking space within a hyperlink

While working on the subnavigation of a website, I encountered an issue with the link Suite «Mont Blanc», which was pulled from the backend. The desired format for this link was:       Suite «Mont Blanc» However, t ...

htmlcsswhitespace

I am facing an issue where my Javascript hide and show function is not working properly when clicked. Despite not giving

I am currently working on a Javascript onClick function to toggle the visibility of content in a lengthy table. I initially set part of the table's class to display: "none" and added a button to show the hidden content when clicked. However, nothing i ...

javascripthtmlcss

Maintaining the navbar-brand Aligned with Links

I'm struggling with this code and can't seem to keep the navbar-brand aligned with the links. <nav class="mb-1 navbar navbar-expand-sm navbar-light fixed-top"> <a class="navbar-brand" href="#">Navbar</a> <but ...

csstwitter-bootstrapbootstrap-4

How can I transfer a JavaScript value to PHP for storage in an SQL database?

<script> var latitudeVal = document.getElementById("latitude"); var longitudeVal = document.getElementById("longitude"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); ...

javascriptphphtml

Adjusting the transparency of the background without altering its colors

I need help figuring out how to merge custom palettes I've created such as this one, which resulted in a .css and .less file. While I want to retain the colors, I also require certain elements' backgrounds to be transparent. To achieve this, I c ...

htmlcsstwitter-bootstrap

Closing Note in Drupal

Is there a way to adjust the footer message in Drupal without logging into the dashboard? I've checked all the files in cPanel, but I can't seem to locate the actual HTML for the website. I am only able to customize the body content, not the fo ...

cssdrupalthemesbootstrap-4precision

Ensure that the text in the table with a width of 100% remains stable

Currently, I am encountering an issue with the inside text moving within my application on a webpage. In my previous tables, I utilized the min-width option to prevent the text or td from shifting when resizing the website page. For example, when stretchin ...

htmlcss

What is the best way to make the text align with the top of its designated space?

I've been experimenting with different CSS properties like vertical-align, line-height, and more. This example should give you an idea of my goal. I added a small red arrow to indicate where I intend for the text to be shifted upwards. ...

htmlcss

adding a new div to the bottom of a row that is being created on the fly

I encountered an issue where rows are created dynamically and I needed to add a div at the end of each row. Despite trying various methods, I faced difficulties as adding the div resulted in extra divs being added to all previous rows whenever a new row wa ...

javascriptjqueryhtmlcss