Utilizing a percentage for the border-width property

I want to remove a triangle from the bottom of a div using a CSS trick involving borders. This involves creating a border with one transparent side and coloring the other sides to create the triangle effect. The issue I'm facing is that the div has a percentage width, so the border needs to also have a percentage width (and possibly height, which is challenging because the div doesn't have a specified height). Unfortunately, the css border-width property doesn't support percentage values.

If anyone has alternative solutions to achieve the same "chopping" effect on the bottom of a responsive div, I would appreciate it.

Some suggestions might include using images or adding one for this purpose, but that won't work in my case as there is a pattern involved that needs to be matched perfectly. Additionally, I prefer not to use multiple background images due to compatibility concerns.

htmlcssresponsive-design

Answer №1

You cannot achieve the desired effect using CSS alone. However, you can implement a hack by utilizing the window resize event.

$w = $(window);
$w.resize(onResize);

function onResize(){

    $("div").css({
        "border-bottom-width": $w.width()*0.12,
        "border-left-width": $w.width()*0.1,
        "border-right-width": $w.width()*0.1
    });

}
onResize();​

Combine this with your existing CSS:

div{
    border-color:blue;
    border-style: solid;
    border-top:0px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0px;
    height:0px;
}

View the example here: http://jsfiddle.net/vuZaw/

Answer №2

If anyone is planning to try this in the future, I made a slight adjustment to Scipions solution so that it resizes based on the parent's width rather than the window's width, which seems more logical:

jQuery(document).ready(function($) {

    $o = jQuery(".topCart");
    $w = $(window);
    $w.resize(onResize);

function onResize(){

    $(".bottomBorder").css({
        "border-top-width": $o.width()*0.2,
        "border-left-width": $o.width()*0.52,
        "border-right-width": $o.width()*0.5
    });

}
onResize();
});

It works really well. I find this feature to be quite impressive and hope that others will also find it valuable.

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

Utilize PHP to create HTML permalinks for optimal linking functionality

I am experiencing an issue with HTML and PHP combination. Here is the code snippet causing trouble: $args = array( 'post_type' => 'program', 'posts_per_page' => 100 ); $loop = new WP_Query( $args ); while ( ...

phphtmlwordpresspermalinks

Tips for changing the default height of Elastic UI dropdown menus

I am attempting to adjust the height of the Task combobox to match that of the Date Picker, but the styling is not being applied when done through a class or inline. https://i.sstatic.net/3Cua1.png I have tried inline styling the element as: <EuiForm ...

cssreactjssass

Mobile-friendly website with consistent design across all devices

Can you help me figure out how to make my website appear at its normal size on mobile devices? I want the entire website to be visible without the need for scrolling, but still allow users to zoom in if needed. I've already tried: <meta name=" ...

htmlcsstwitter-bootstrap

The "date" field seems to be malfunctioning on iOS devices exclusively

I'm having issues with a simple HTML CSS form that includes an input type="date" field which is not working on iOS devices. <fieldset class="form-group border p-3"> <div class="row mx-auto"> <legend class=" ...

phphtmlcssiosbootstrap-4

What are some ways to customize the player for Youtube videos?

I'm looking to recreate the design of Youtube videos on my website when I embed them. The image below is just an example, but it reflects the simplicity I am aiming for. Any guidance or examples would be greatly appreciated, as I am unsure where to be ...

phphtmlcssyoutube

Transition one background image into another using background positioning

Snippet of code: https://jsfiddle.net/foy4m43j/ HTML: <div id="background"></div> CSS: #background { background-image: url("http://i.imgur.com/hH9IWA0.png"); background-position: 0 0; background-repeat: repea ...

javascriptjqueryhtmlcss

What is the best way to transform an HTML table into a jQuery array of key-value pairs?

I have an HTML table (without a tbody tag) and I am trying to convert the HTML data into key-value pairs (header-data) in a jQuery array. Currently, when I run the code snippet, the output only displays data from the last row of the table. ************Cur ...

htmljqueryarrayshtml-tablekey-value

The table on the page shifts position when viewed on different devices, sometimes not remaining between the header and footer

Here is a link to see how my page looks with the header, table, and footer: https://i.sstatic.net/U6tdO.png If you want to see how it looks when responsive (with smaller width), check out this link: https://i.sstatic.net/zsGkc.png I have encountered 2 ma ...

htmlcssangular

Animation does not trigger before switching pages

I'm attempting to create an animation that occurs before the page transitions. After finding a jQuery script on this site and tweaking it to match my HTML, I realized the code works in a fiddle but not on my actual page. Any assistance would be greatl ...

jqueryhtmlcssweb

In a React application, the input field unexpectedly loses focus after typing just one character

Has anyone encountered an issue with a dropdown menu causing input field focus to be lost after typing one character? I've attempted setting unique keys for each field, but it hasn't resolved the problem. For reference, here is the link to the p ...

javascripthtmlreactjsreact-hooks

What is the procedure for assigning an element's background-color to match its class name?

Is there a way to use jQuery to make the background color of a span element match its class? $(function() { $("span").css("background-color") }); span { display: inline-block; width: 5px; height: 5px; border: solid #0a0a0a 1px; } <script src= ...

javascriptjqueryhtmlcss

Unable to modify the appearance of an HTML element when injected via a Chrome extension

I am currently developing a unique chrome extension that uses Ajax to inject custom HTML into the current tab. This extension appends a <div> element to the body, and now I need to manipulate it using JavaScript. Specifically, I want it to dynamical ...

javascriptjqueryhtmlcssajax

Retrieving information from CRM online utilizing the Web API

Recently, I developed a webpage to serve as a survey for end users to provide feedback on the helpdesk technician's performance in resolving tickets. The webpage was constructed using HTML, CSS, JS, and PHP. Currently, the page requires access to two ...

javascripthtmldynamics-crm

Ways to shift pictures sequentially in a horizontal line?

I am currently working on a project in asp.net where I need to rearrange 'x' number of images in a row. To explain the scenario, let's say we have 5 images labeled as 1, 2, 3, 4, and 5. Initially, they are in the order of 1, 2, 3, 4, 5. Then ...

c#javascriptasp.netcss

Adding a border in jQuery or Javascript to highlight empty form fields

After making the decision to dive into the world of Javascript, I've been dedicated to perfecting a script that will encase empty elements with a border right before the user submits a form. My ultimate goal is to implement live validation in the form ...

javascriptjquerycsshtml

Data structures of advanced complexity within HTML data attributes

I am delighted by the existence of the html5 data attribute. It's great to be able to input a plain string into html attributes and retrieve them using jquery. However, wouldn't it be wonderful to have more than just a basic string? Is there a ...

javascriptjqueryhtml

Failure of Styling Inheritance in Angular 2 Child Components from Parent Components

My Parent Component utilizes a Child Component. I have defined the necessary styles in the Parent CSS file, and these styles change appropriately when hovering over the div. However, the Child Component does not inherit the styling classes of the Parent Co ...

htmlcssangulartypescriptangular2-template

The h3 element is not responding to the adjacent sibling selector

Below is my HTML DOM structure. I am trying to remove the margin and padding for all h3 elements that are immediate siblings of a div with the id "successor". I attempted to achieve this using the adjacent sibling selector "+", but unfortunately, I'm ...

htmlcsscss-selectors

Encountering a problem with AJAX 'post' method while trying to post HTML elements

Incorporating AJAX to transmit the content of a div to my C# MVC controller. The structure of the AJAX post is as follows: $.ajax({ url: '/Home/SaveContent', type: 'POST', data: { model: modelDataJson, activ ...

c#htmlajax

Ways to patiently wait in a for loop until the ajax call is completed

I am a beginner in web development and currently working on a small website project that involves using ajax to display new comments. Below is the function I have created: function show_comments() { $('div#P_all_posts>div').each(function () { ...

javascriptphpjqueryhtmlajax