I'm noticing that the top border for my span is smaller than the bottom one. What could

I am struggling to create an arrangement of three triangles in a line, with the first and third pointing up and the middle one pointing down. The upper triangle seems to be too small - any ideas on how to adjust this?

Is there another way to achieve this desired triangle arrangement?

.lower {
  border-width: 50px;
  border-color: black red green blue;
  border-style: solid;
}

.upper {
  border-width: 50px 50px 0 50px;
  border-color: black transparent transparent transparent;
  border-style: solid;
  height: 50px;
}
<div class="triangles">
  <span class="lower"></span>
  <span class="upper"></span>
  <span class="lower"></span>
</div>

htmlcss

Answer №1

It is common knowledge that a span is an inline element, so in order to allocate actual space for it, you will need to change it to an inline-block element. Simply include the following code snippet in your CSS:

span {
display: inline-block;
}

This adjustment will resolve any issues with border width (Y).

Answer №2

This is just one possible solution; an alternative method to achieve the desired outcome. The reasons behind why or how it works remain unclear to me.

.lower,
.upper {
  border-style: solid;
  display: inline-block;
}

.lower {
  border-width: 0 50px 50px 50px;
  border-color: transparent transparent black transparent;
}

.upper {
  border-width: 50px 50px 0 50px;
  border-color: black transparent transparent transparent;
}
<div class="triangles">
  <span class="lower"></span>
  <span class="upper"></span>
  <span class="lower"></span>
</div>

Answer №3

It appears that the issue stems from the presence of a zero in

padding: 20px 25px 0 30px;

Answer №4

    .lower-layer {
      border-width: 50px;
      border-color: black red green blue;
      border-style: solid;
    }

    .upper-layer {
      border-width: 50px 50px 0 50px;
      border-color: black transparent transparent transparent;
      border-style: solid;
      height: 50px;
    }
    .displayed {
      display: inline-flex;
    }
    <div class="triangular-shapes displayed">
       <span class="lower-layer"></span>
       <span class="upper-layer"></span>
       <span class="lower-layer"></span>
    </div>

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

Simple Timer App with Vanilla JavaScript

Hey there! I am a newcomer to JavaScript and recently joined the stackoverflow community. Currently, I am working on a project called Pomodoro Timer with the goal of creating something similar to this example: http://codepen.io/GeoffStorbeck/full/RPbGxZ/ ...

javascripthtml

Arrange, Explore (Refine), Segment HTML Chart

Is there a way to efficiently sort, paginate, and search (based on a specific column) data in an HTML table? I've explored several JQuery plugins such as DataTable, TableSorter, Picnet Table Filter, but none seem to offer all three functionalities (se ...

phpjavascriptjqueryhtmljquery-plugins

Is it true that setting the background size to cover does not actually stretch the image?

Hi, I seem to be having trouble stretching an image using the background-size property. Despite setting it to cover, one or two sides of the image are always getting cropped. What I really want is a way to distort the image so that it stretches to fit any ...

htmlcssbackground-imagepositioning

Implement a function to trigger and refresh components in various Vuejs2 instances simultaneously

I currently have index.html with two Vue instances in different files: <!DOCTYPE html> <html lang="en"> <body> <div id="appOne"> </div> <div id="appTwo"> </div> </body> </html ...

javascripthtmlnode.jsvuejs2

Generate a collection of div elements as child nodes

I'm working on a project where I have multiple rows with input fields. My goal is to create an array for each row that contains the values of the inputs. For example, if I have 3 rows and the values of 'input1' are 1, 'input2' are ...

javascriptjqueryhtmlarrays

Is the embedded audio player not showing up on the screen?

I've been trying to add music to my blog page using the Billy audio player. I have successfully done this in the past, but for some reason, the player is not appearing on the finished page (I checked on both FireFox and Google Chrome) and I can't ...

htmlcssembed

the scrollbars are appearing on the window instead of within my div container

I'm having trouble getting a scrollbar on my div element when the content is too wide. Instead, the scrollbar always appears on the window itself. I have tried adjusting the overflow settings but can't seem to find the right solution. jsFiddle ...

htmlcssresizescrollbaroverflow

Adding a linear gradient with a fade effect to Highcharts sparkline chart: Step by step guide

I am working with a Highcharts sparkline chart, and the design in my Figma file resembles the image provided below. I would like to customize the chart by adding transparency and a linear-gradient effect. Can anyone provide guidance on how to achieve this? ...

csshighcharts

What is the best way to modify React state?

Can someone help me troubleshoot an issue with toggling React state after a button click? I want to be able to change "Work From Office" to "Work From Home" and vice versa, but it's only working once. Is there a way to achieve this using an if stateme ...

htmlcssreactjs

The text-decoration is here to stay

Currently, I am facing an issue with the customization of a wordpress theme related to the styling of links within posts. Although I have tried to change the color and remove underlining using CSS rules, I am unsuccessful so far: a, .entry-meta a, entry-c ...

htmlcsswordpresshyperlinktext-decorations

Expanding the header in Ionic 3 with a simple click event

I have successfully implemented an Expandable Header in Ionic 3 following a tutorial from Joshmorony. The header expands perfectly on scroll, as you can see in this GIF: However, I am facing an issue where I want to expand the header on click instead of o ...

htmlcsstypescriptionic-frameworkangular5

When you click on a main category, a list of its corresponding subcategories will

concept image My vision involves having users click on a category from the top menu to display all main cards (parent cards), and then further clicking on a parent card will unveil its corresponding child cards. I've even included an image to help v ...

javascripthtmljquerybootstrap-5

Display a div using Jquery depending on the visibility and checked value of another div

Trying to toggle the visibility of a div based on another div's input has proven to be quite challenging in this scenario. Here is the HTML setup: <div id="main-question"> <div class="form-group"> <div class="form-radios"> ...

jquerycss

When HTTP 304 meets the Cache-Control directive with a value of no-cache

I'm encountering the following response from certain web server requests: First request: HTTP/1.1 200 OK Date: Mon, 16 Jan 2012 05:46:49 GMT X-Powered-By: Servlet/2.5 JSP/2.1 Content-Type: text/plain Content-Length: 78 Content-Encoding: gzip Etag: " ...

htmlhttphttp-headers

Execute a Python script even if Python is not installed on your device

One of my clients needs to access certain files through sftp. I was able to accomplish this using Python on my computer. However, I now face the challenge of implementing the same solution on his laptop without requiring him to install Python. What would ...

pythonhtmlsftp

The body content of the webpage needs to be updated without altering the header and footer, all while avoiding a page

On my website, I have a header menu that includes buttons for "home" and "about us." The default page is set to the home page. Within the home page, there is a specific link. When this link on the home page or the "about us" button is clicked, I want the ...

javascripthtmlangularangular2-routing

Overflow and contain a flex item within another flex item

I am facing a challenge where I need to prevent a flex-child of another flex-child from overflowing the parent, ensuring it does not exceed the screen height or the height of the parent (which is also a flex-child). Here's the CodePen link for refere ...

htmlcssvue.jsflexboxvuetify.js

Content in TinyMCE styled with the default CSS of the application

Hello fellow developers; I'm struggling to find a suitable solution to apply the same styles from our main CSS file to the text entered in the TinyMCE editor. Just to clarify, I don't want to alter the overall theme or appearance of TinyMCE itse ...

javascripthtmlcsstinymcetinymce-4

Transforming an image into a CSS-powered website menu button: Step-by-step guide

I am currently using images as button backgrounds, and I have programmed them to change when the button is clicked to give the impression that it is being pressed. However, I am looking to enhance the responsiveness of the page, so that the images also cha ...

css

Content on the right floating underneath content on the left

Here is the HTML code snippet I am working with: <div id="main_content"> <div id="left_side> <h1> MY BIG HEADER </h1> </div> <div id="content_area"> SOME CONTENT HERE SOME CONTENT HERE S ...

htmlcsscss-float