Styling with CSS to create a tab in the shape of a

Is it possible to turn the square at the bottom of my tab into a small arrow pointing downwards instead of an image?

The javascript may not be functioning on this specific site, but it works fine on my website. How can I achieve the effect of having a small arrow point downward instead of using an image?

li.current::after { 
    color: transparent;
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    margin: auto;
    border-width: 15px 15px 0px;
    border-style: solid;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACcQAAAAyCAYAAAB4IErqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0Q3JlYXRpb24gVGltZQAyOS8wNi8yMDExWc9aJgAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAcjSURBVHic7d0xjuVEFEDR/lANAgapA6QhJIPlsFVEDBIpywAhskkIJpl2sYqS1fedswInV+Vn+7//+PXvj/sJSPvx3Wd3XwJw2MuXn999CcBhXz87z6Huz/8ed18CcNhP7+6+AuC0l+e7rwA47au7LwA4bv/7x92XABz2+MaADnXrl78+...
    background-position-x: -100px;
    width: 0;
}

Thank you!

javascriptjqueryhtmlcss

Answer №1

border-width: 11px 12px 0px 12px;
border-color: #30B3EE transparent;


ul.tabs {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.tabs li {
  background: none;
  color: #222222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
  background-image: url('data:image/png;base64,...');
  *background-image: url(../img/sprites/nav.png)!important;
  /* For IE 6 and 7 */
  background-repeat: repeat-x;
  border: 1px solid #189CD7;
  -ms-border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -ms-border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  position: relative;
}
li.current::after {
  color: transparent;
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  margin: auto;
  border-width: 11px 12px 0px 12px;
  border-color: #30B3EE transparent;
  /* background-position-y: -100px; */
  border-style: solid;
  /* border-color: #30B3EE transparent; */
  background-position-x: -100px;
  width: 0;
}
.tab-content {
  display: none;
  padding: 15px;
}
.tab-content.current {
  display: inherit;
}
<ul class="tabs">
  <li class="tab-link current" data-tab="tab-1">Change Address</li>
  <li class="tab-link" data-tab="tab-2">Change Ownership</li>
  <li class="tab-link" data-tab="tab-3">Re-grade Service</li>
  <li class="tab-link" data-tab="tab-4">Cease Service</li>
</ul>

<div id="tab-1"" class="tab-content current">
  Please call us to discuss address changes on 01392 333 333
</div>
<div id="tab-2" class="tab-content">
  Please call us to discuss ownership changes on 01392 333 333
</div>
<div id="tab-3" class="tab-content">
  Please call us to discuss re-grading of this service on 01392 333 333
</div>
<div id="tab-4" class="tab-content">
  Please call us to discuss ceasing of this service on 01392 333 333
</div>

Answer №2

Give this a try...

.current-item::after {      
    color: transparent;
    content: "";
    position: absolute; 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    bottom: -16px;
    left: 0;
    right: 0;
    margin: auto;
    border-width: 15px 15px 0px;
    /* background-position-y: -100px; */
    border-style: solid;
    border-color: #30B3EE transparent;

    background-position-x: -100px;
    width: 0;
}

Answer №3

To create a border effect, simply include the Border Property:

li.current::after { 
    color: transparent;
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    margin: auto;
    border-top : 15px solid #000;
    border-left : 15px solid transparent;
    border-right : 15px solid transparent;
    width: 0;
}

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

Sending data from jQuery to an AngularJS function is a common task that can be accomplished in

In my Controller, I have a function that saves the ID of an SVG path into an array when a specific part of the image.svg is clicked. $(document).ready(function(){ var arrayCuerpo=[]; $('.SaveBody').on("click", function() { ...

javascriptjqueryangularjsarrays

Issue Encountered While Loading CSS using Webpack and Babel

I am currently working on a SSR React App using Webpack3 and Babel6. However, when I launch the server, it is not able to locate any css file (Error: Cannot find module './file.css'). Here is an overview of my current folder structure: src/ | ...

cssreactjswebpackimportbabeljs

The selection form does not display a preview of the options

I recently discovered that the CSS I added is causing the preview of select options in my form to disappear. Despite searching online, I have been unable to find a solution to this issue. Here is the problematic CSS code: .form-control{ height: 50px; ...

htmlcssdjangocss-selectors

What is the method for using the spread operator to add a property to an inner object in Typescript?

I have the following Object: let car = { year: 2004, type: {name: "BMW"} } Now, I am trying to add a property to the inner object "type". My aim is to achieve this using the spread operator as I require a new object due to the existing one being an immut ...

javascripttypescriptspread

Creating a unique look for unordered list items in a dropdown navigation

I'm currently working on creating a drop-down menu using nested unordered lists. The functionality of the menu is all set, but I'm running into some styling issues. The main link that triggers the drop-down should have a blue background with whit ...

htmlcssdrop-down-menu

Dynamic element not firing jQuery event

My question is...https://i.sstatic.net/me2uQ.png // Using ajax to dynamically create a table $(".n").click(function(){ var id= $(this).closest('tr').find('td.ide2').html(); //for displaying the table $.ajax({ ...

javascriptjqueryajax

Retrieve specific content upon the loading of a webpage

I've been working on a function that detects a value and performs some operations with it. However, I'm running into an issue where I can't retrieve the value when the page initially loads, but I can access it after selecting a value. How ca ...

javascriptjquery

Having trouble with the jQuery select2 AJAX functionality?

I've been experimenting with the jQuery select2 plugin and attempting to integrate AJAX with my external data, but unfortunately it's not working as expected. I'm curious if anyone can help me identify what mistake I might be making or if th ...

javascriptjqueryajaxjquery-select2

Awesome method of redirecting outdated URLs to the most recent established URL

My website heavily relies on JavaScript and communicates with a .NET C# RPC service. We encountered an issue where clients' browsers cached the JavaScript, so we decided to add a version number to the URL in order to force them to use the latest JavaS ...

c#javascriptasp.netiis-8http-redirect

Unable to update state from within a function in react

As I delve into the realm of coding, a simple graph catches my eye. It showcases various data sets including current, all, and filtered data. Initially, the first block of code runs smoothly. However, upon attempting to setState in order to make some modif ...

javascriptreactjsfunctionreact-hooksstate

The behavior of AJAX Search varies between the development and production environments

I recently integrated an instant search feature into my application. During testing on the local server, the functionality met my expectations: It filters the list as I type It is not case-sensitive It allows for resetting the search if I delete the inp ...

javascriptruby-on-railsajaxruby-on-rails-3heroku

Is it feasible to use a component in a recursively manner?

Following a two-hour search for a solution, I decided to reach out to experts as I suspected the answer might be simpler than expected. The project in question is an Angular7 one. In my goals component, I aim to include a "goal" with a button labeled "+". ...

htmlangulartypescriptcomponents

The system has removed all content within the fields

I have created a code to generate a dynamic table. The problem I am facing is that when there are multiple rows in the table, clicking on the delete button deletes all field values instead of just deleting the data for the specific row where the delete b ...

javascriptjqueryhtml

Tips for displaying text gradually when hovering over a button

Is there a way to make text appear slowly on hover of a button without it coming from the bottom to the right? I attempted using transition:all 5s;, but encountered the issue of the text moving from the bottom to the right due to improper width. Is there a ...

javascripthtmlcss

The optimal method for storing tokens in Vue when using Laravel Sanctum

I am currently working on an application built with Laravel and Vue.js. My current focus is implementing the login/logout functionality using Laravel Sanctum. Here is my scenario: I already have the backend methods for login/logout/register set up, but I ...

javascriptphplaravelvue.jsvuex

Error: Attempting to access 'input_date' property of null object resulted in an uncaught type error

I am attempting to implement pagination for a data table using AJAX to refresh the table without having to reload the entire page. However, I am encountering an issue where the input_date is being considered null even though it should not be. Below is the ...

javascriptjqueryajaxlaravelpagination

Retrieving server information using AJAX in React

I've been attempting to utilize an AJAX call in order to fetch server data for my React Components. However, I'm encountering difficulties when it comes to displaying it with React as I keep receiving this error: Uncaught TypeError: Cannot read ...

javascriptjqueryajaxnode.jsreactjs

What is the best method for interacting with multiple links in Puppeteer?

As a beginner with puppeteer, I am diving into the world of web scraping by attempting to create a simple scraping task. My Plan of Action The plan is straightforward: Visit a page, Extract all <li> links under a <ul> tag, Click on each < ...

javascriptnode.jspuppeteer

What causes an element to gain an additional 1px of internal height when a border is applied?

Have you ever wondered why the apparent visual height of an element inside a border increases by 1 when a border is placed around it? The reported offsetHeight remains the same, equal to the desired height plus the border widths. This issue becomes especi ...

css

Error: Execution of 'texImage2D' on 'WebGLRenderingContext' failed due to overload resolution issues

I am currently working on developing a 3D customizer by using fabricjs as the canvas texture for my three js model. The method I use to load the obj file is as follows: function loadObj() { canvasTexture.anisotropy = renderer.capabilities.getMaxAnisotr ...

javascriptthree.jsfabricjs