What is the best way to make a CSS element embrace another element positioned either above or below it?

I've been attempting to arrange multiple CSS shapes to hug each other, but I'm facing some difficulties. After researching online, the only solution I came across was using inline-block. However, I'm struggling to achieve the desired outcome. While it works for aligning shapes next to each other, it doesn't work for shapes above and below each other.

For example, if I want to create a diamond shape using triangles:

.r_tleft {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 25px 25px;
  border-color: transparent transparent #007bff transparent;
  display: inline-block;
}

.r_tright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 0 25px;
  border-color: transparent transparent transparent #64C7CC;
  display: inline-block;
}

.r_bleft {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 25px 0;
  border-color: transparent #64C7CC transparent transparent;
  display: inline-block;
}

.r_bright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 25px 0 0;
  border-color: #007bff transparent transparent transparent;
  display: inline-block;
}
<div class="r_tleft"></div>
<div class="r_tright"></div>
<div class="r_bleft"></div>
<div class="r_bright"></div>

The result appears like this:

◢◣◥◤

If I add a break tag, it changes the layout:

<div class="r_tleft"></div><div class="r_tright"></div>
<br>
<div class="r_bleft"></div><div class="r_bright"></div>

.r_tleft {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 25px 25px;
  border-color: transparent transparent #007bff transparent;
  display: inline-block;
}

.r_tright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 0 25px;
  border-color: transparent transparent transparent #64C7CC;
  display: inline-block;
}

.r_bleft {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 25px 0;
  border-color: transparent #64C7CC transparent transparent;
  display: inline-block;
}

.r_bright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 25px 0 0;
  border-color: #007bff transparent transparent transparent;
  display: inline-block;
}
<div class="r_tleft"></div>
<div class="r_tright"></div>
<br>
<div class="r_bleft"></div>
<div class="r_bright"></div>

This output appears as:

◢◣

◥◤

As evident, neither of these layouts achieve the desired result.

htmlcss

Answer №1

Your attempt was almost there, however, it's important to remember that setting elements to be inline-block will make them behave like inline elements, resulting in line properties being applied. In your scenario, to adjust the vertical spacing, you can manipulate the line-height of the container block instead:

.r_tleft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 25px 25px;
    border-color: transparent transparent #007bff transparent;
    display:inline-block;
}

.r_tright {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 0 25px;
    border-color: transparent transparent transparent #64C7CC;
    display:inline-block;
}

.r_bleft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 25px 0;
    border-color: transparent #64C7CC transparent transparent;
    display:inline-block;
}

.r_bright {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 0;
    border-color: #007bff transparent transparent transparent;
    display:inline-block;
}
<div style="line-height: 0px">
  <div class="r_tleft"></div><div class="r_tright"></div>
  <br>
  <div class="r_bleft"></div><div class="r_bright"></div>
</div>

Answer №2

To achieve the desired effect, wrap each of your items in divs and then apply CSS to the wrapper div to adjust their positioning as needed.

.r_tleft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 25px 25px;
    border-color: transparent transparent #007bff transparent;
    display:inline-block;
}

.r_tright {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 0 25px;
    border-color: transparent transparent transparent #64C7CC;
    display:inline-block;
}

.r_bleft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 25px 0;
    border-color: transparent #64C7CC transparent transparent;
    display:inline-block;
}

.r_bright {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 0;
    border-color: #007bff transparent transparent transparent;
    display:inline-block;
}
 <div><div class="r_tleft"></div><div class="r_tright"></div></div>
    <div><div class="r_bleft"></div><div class="r_bright"></div></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

jQuery parent() Function Explained

checkout this code snippet - https://jsfiddle.net/johndoe1994/xtu09zz9/ Let me explain the functionality of the code The code contains two containers: .first and .second. The .first container has two default divs with a class of .item. The .second contai ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ensure that the data prop in Vue is always updated whenever there is a change in

In my Vue.js project, I am creating a data property called w to store the clientWidth of a specific element in my HTML. In the mounted hook, I am initializing it like this: data() { return { w: 0, }; }, mounted() { this.w = this.$refs.timelineProgres ...

javascripthtmlcssvue.jssass

Sending information from one page to another and then sending it once more

I am currently utilizing the following code to submit a form's data to : <script type="text/javascript"> $(document).ready(function(){ $("#textnextofkin").validate({ debug: false, rules: { ...

phpjavascripthtmlajaxforms

The sidebar on the right side of the screen is content to relax beneath my

The positioning of my sidebar is currently below the content on the left side of the page, but I want it to sit beside the content on the right side. I've tried various solutions from similar questions without success. Here is an example of how I woul ...

csshtmlcss-floatsidebar

What is the best way to showcase the dropdown menu items of a bootstrap navbar in a horizontal layout instead of vertical?

While utilizing Bootstrap 4, I encountered an issue with the dropdown section where the items are displayed vertically instead of horizontally. I want these dropdown items to be arranged horizontally next to each other. <nav class="navbar navbar-expand ...

htmlcssbootstrap-4

Increasing the upward motion of the matrix raining HTML canvas animation

Recently, I've been experimenting with the Matrix raining canvas animation here and I was intrigued by the idea of making it rain upwards instead of downwards. However, my attempts to achieve this using the rotate() method resulted in skewing and stre ...

javascripthtmlcanvas

Styling Dropdown Options Based on Conditions in React

In my current project, I am attempting to modify the className of selected items within a mapped array using another array (this.props.notPressAble). The reason for this is because I want certain objects in the array to have a different CSS style. handleOp ...

javascriptcssreactjs

PHP is unable to match a CAPTCHA code with the string entered by the user

I've developed a login system along with a CAPTCHA string that randomly generates characters in the form A1B2C3, containing uppercase and lowercase letters. Below is the code snippet: $cArr1 = array_merge(range("a", "z"), range("A", "Z")); $cArr2 = r ...

phphtmlstringcaptcha

What is the best way to extract specific content from HTML and display it within a specific HTML tag using

#!/usr/bin/env python import requests, bs4 res = requests.get('https://betaunityapi.webrootcloudav.com/Docs/APIDoc/APIReference') web_page = bs4.BeautifulSoup(res.text, "lxml") for d in web_page.findAll("div",{"class":"actionCol ...

pythonhtmlparsing

Need inspiration for testing web content with Protractor?

Exploring new possibilities for testing web content with Protractor. Any fresh ideas on what else can be tested? So far, I've checked links to ensure they redirect correctly. I've also verified text color and decoration changes when hovering ove ...

htmlcsstestingprotractorend-to-end

What steps can I take to troubleshoot and repair my accordion feature within an Angular project?

As a newcomer to Angular, I recently attempted to create an accordion component but encountered unexpected behavior. Here is the HTML code for my attempt: <div class="faq-item-container"> <h1 class="mt-1 mb-5"><strong>Frequently A ...

htmlcssangulartypescript

Issue with Android date input field not resetting the value

When testing in Android Tablet (version 4.1.2), I encountered a strange issue with an input date field that looks like this: <input type="date" value="2013-06-10"/>. Upon clicking on the field and trying to set a new date, instead of replacing the o ...

javascriptandroidhtmldatepicker

What is the best way to display a bitmap image in a Div, Span, Label, etc. on an Asp.Net page without using a Handler?

I am looking to display a bitmap image within a Div element using code behind. I prefer not to use a handler for this task. Here is an example of what I would like to achieve: div.InnerHtml = BitmapImage; ...

c#asp.nethtmlbitmap

Using Ajax to update multiple text field rows with unique values

I have a question regarding utilizing Ajax to update the second text field based on the input from the first text field. I am looking to create multiple rows using a for loop, with each row having its own set of values. HTML <form style="text-align:c ...

phpjavascripthtmlajax

How do I ensure that the active item in the sidebar remains in view as I scroll?

After trying various methods found on Stack Overflow and jQuery examples, I wasn't able to successfully implement it in my grav theme. Every time I click on an item in my sidebar, the page refreshes and the sidebar scroll position resets to the top. W ...

javascriptjqueryhtmlajax

Guide to positioning Bootstrap 5 toast messages at the center of an ASP.NET Web Form

I have integrated a Bootstrap toast element within an ASP.NET web form as shown below: <asp:Content ID="ctMain" ContentPlaceHolderID="cpMain" runat="server"> <div aria-live="polite" aria-atomic="tru ...

htmlcsstwitter-bootstrapbootstrap-5bootstrap-toast

Listening to audio on a mobile browser using an HTML audio element

What is the solution for the problem of playing audio on a mobile browser when it plays on a desktop browser but not on mobile? The code being used is: var audio = new Audio('sound.mp4') audio.play() ...

javascripthtmlaudio

The JavaScript jump function quickly moves back to the top of the webpage

Issue Resolved To prevent the view from jumping to the top of the page, I have implemented three options: Set the href attribute to href="#!" Set the href attribute to href="javascript:;" Pass the object to the event-handler and preve ...

javascriptjqueryhtml

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

I'm facing an issue while attempting to import the 'JSZip' module from an external node package called JSZip in my HTML File. The usual method of importing it directly using the import command is not working: <script> import ...

javascripthtmltypescriptfigmafigma-api

The form submits automatically upon loading the page with empty input fields

I recently created a form on my website located at . Initially, the form functioned correctly and the PHP script executed as expected. However, I am now encountering an issue where every time I load the page, a popup message appears indicating that the for ...

javascriptphphtmlforms