Step-by-step guide for making a CSS triangle design that is compatible across different browsers

Here's a common CSS code for creating a CSS triangle:

display: inline-block;
vertical-align: middle;
content: " ";
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top: 6px solid black;
width: 0;
height: 0;

Click here to see it in action

However, this method may result in pixelated edges when viewed in Firefox on OSX.

Fortunately, there is an easy fix specifically for Firefox. Just apply border-style:

border-style: solid dotted none;

But be warned - applying border-style can cause the triangle to break and render as a rectangle in IE10+ (although strangely, it works fine in IE8):

For more information on this issue, check out this blog post (best viewed in IE11):

Learn how to fix the pixelation issue in Firefox

Do you have any suggestions on how to make it work properly in both Firefox and IE10?

csscross-browsergeometrycss-shapes

Answer №1

Swap out dotted for double.

Take a look at this link

The reason why dotted doesn't work for IE10+ is not entirely clear, but it may have to do with the calculation of the line due to the gaps.

It's important to note that using CSS triangles involves exploiting web browser border intersections in a clever yet unintended way.

.arrow-down {
  position: absolute;
  top: 22px;
  left: 10px;
  display: inline-block;
  vertical-align: middle;
  content: " ";
  border-right: 32px double transparent;
  border-left: 32px double transparent;
  border-top: 48px solid black;
  width: 0;
  height: 0;
}

Answer №2

To achieve smooth rendering on Firefox, keep the border-style: solid and add -moz-border-start-style: dotted;.

Check out this demo for a visual representation.

CSS:

.arrow-down { 
  width: 0; 
  height: 0; 
  border-width: 20px 20px 0;
  border-style: solid;
  -moz-border-start-style: dotted;
  border-color: #f00 transparent;
}

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

Guide to Embedding an External CSS Stylesheet

I have made edits because the link to the "previously answered solution" is not helpful. Find additional information attached at the end of this question Original Query All my HTML pages contain two links to external style sheets. As a result, I am look ...

htmlcss

Adjust the column count in mat-grid-list upon the initial loading of the component

My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...

javascriptcssangulartypescriptangular-material

Tips for resolving div overlap issues when utilizing a customized div within a container-fluid layout (Bootstrap)

As a newcomer to HTML, CSS, and Bootstrap, I encountered an issue with overlapping divs when resizing the screen to be smaller. The problem arose when using container-fluid as a section and implementing a customized div for the section header. Despite atte ...

htmlcssbootstrap-4

What are some ways to utilize CSS variables for enhancing component styles within Svelte?

Presented here is a straightforward component called Text.svelte. It utilizes a CSS variable to prevent unnecessary duplication: <div> <span class="t1">t1</span> <span class="t2">t2</span> </div> ...

csssveltevite

Creating a custom button to perfectly fit the contours of its content with Font Awesome 5

Can the shape of a button be altered to match its content? Specifically, I am using the "fa-trash-alt" icon and have a button with hover effects that I only want to apply to the icon itself rather than the entire button. Button: <button type='but ...

htmlcssbuttonfont-awesomefont-awesome-5

Display an HTML checkbox with intricate design features

I have a simple question - how can I print a green checkbox with a white check mark (Ctrl + P) without it turning black and white? This solution currently works with Bootstrap 4.0.0, but needs to be compatible with bootstrap 3.3.7. I've managed to cr ...

htmlcss

react native ScrollView items with uniform padding at the top and bottom

I'm currently working on a scroll component that resembles a gallery of images. My goal is to center the images based on the device height with equal padding on both the top and bottom. However, I'm facing an issue where the top padding does not ...

cssreactjsreact-native

Achieving auto-height for two elements with CSS within a single block

I am attempting to combine two blocks into one fixed-height block in order to achieve the following design: ------------------------ UL (starts with height=0), expands when elements are added until maximum height is reached scroll bar should appear aft ...

csshtml

Utilizing CSS filters to add a blur effect to specific elements within an SVG

I've been attempting to use the CSS filter blur on certain elements, but for some reason it's not working as expected. Check out this example in a jsfiddle: http://jsfiddle.net/kuyraypj/ Even though I have applied the following CSS, my '.b ...

csssvg

placing additional containers at the bottom rather than on the right side

Hey there! I'm currently working on a simple website and I'm having trouble getting the duplicated form rows to appear aligned below the previous one. Here's what I have right now: var i = 0; var original = document.getElementById("dupl ...

javascripthtmlcss

When the span element's height is set to 100%, it does not automatically match the height of its parent div

I have a scenario where I am working with two div elements and a span element in between. The parent div element does not have a defined height, it is calculated based on the content within the div. However, the span element's height is set to 100% ev ...

htmlcss

Hide HTML div on click

Why does the button disappear when I click on it, but the status refreshes? Javascript $( ".refreshstatus" ).click(function(){ $( ".navplayers" ).load('stats.php'); }); CSS .refreshstatus{ font-family:'Noto Sans'; font-w ...

javascriptjqueryhtmlcss

How can I address the problem of adjusting the title to match the size of the image in question?

I need help creating a design where an image and h2 title appear on top of the image... Below is a reference screenshot: I am looking to achieve something similar. CSS: h2 { position: relative; letter-spacing: 1px; display: inline-block; positi ...

jqueryhtmlcss

Complete guide on modifying CSS with Selenium (Includes downloadable Source Code)

I am looking to switch the css styling of a website using Python and Selenium. My initial step was to retrieve the current CSS value. Now, I aim to alter this css value. The Python code output is as follows: 0px 0px 0px 270px How can I change it from 0 ...

javascriptpythonhtmlcssselenium

Enhance your title bar with an eye-catching image

Is there a way to add an image to the title bar? I currently have the title set as "Webnet". I attempted to combine it with a FontAwesome Glyphicon's icon image like this: <title><i class="icon-user icon-black"></i>Webnet</titl ...

htmlcssfaviconfont-awesomeglyphicons

What is the best way to enlarge an image while keeping it contained within a card using Bootstrap?

Is it possible to create a visually appealing card similar to the image provided using Bootstrap 5.3.3 and HTML on a website? https://i.sstatic.net/OH4U0.png ...

htmlcssbootstrap-5card

How can I customize a CSS media class?

In my project, I am using a CSS library that includes the following class: @media only screen and (max-width: 480px) { .nav-tabs>li { margin-bottom:3px; } .nav-tabs>li, .nav-tabs>li>a { display:block !important; ...

htmlcss

Arranging inline-flex elements within a div container

I have been struggling to position two elements side by side within a single div, where the second element should be on the right side. <div className={classes.container}> <div className={classes.first}> First </div> <d ...

cssflexboxmaterial-ui

The navigation bar is failing to display all of the titles

Having trouble with my HTML page. I can only see the first word of the title in the drop-down list. The navigation bar refuses to center despite trying various styles. Below is my CSS code: background-color: #78706e; height: 100%; font-family: Arial; c ...

htmlcssdrop-down-menumenunavbar

Apply this class exclusively for mobile devices

Is there a way to add the class p-5 only for mobile devices? For desktop computers: <nav class="navbar navbar-expand-lg navbar-light bg-light" style="padding:0px 10px 0px 10px;"> For mobile devices: <nav class="navbar navbar-expand-lg navbar-l ...

htmlcss