Develop a downward facing arrow that adjusts to different screen sizes

I'm looking to create a grid with a downward arrow incorporated. Take a look at the image below:

The issue I'm facing is that because of the variable width caused by .col-xs-3, the div's size varies. How can I adjust the width of the arrow (:after element) so that it remains responsive?

This is My CSS:

.grid-arrow::after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 47px solid transparent;
    border-bottom: 47px solid transparent;
    border-left: 40px solid rgb(173, 173, 173);
    position: absolute;
    /* top: 50%; */
    margin-top: -37px;
    /* margin-left: 1px; */
    left: 50%;
    z-index: 3;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}

This is My HTML:

<div class="col-xs-3 advantage grid-arrow">
    <div>
        Some text
    </div>
</div>
htmlcsstwitter-bootstrapresponsive-designcss-shapes

Answer №1

As highlighted by @ochi, there exists a potential solution tailored to your needs.

Translating this into your code would look something like the following:

HTML:

<div class="col-xs-3 advantage grid-arrow">
    <div>
        Insert your text here.
    </div>
</div>

CSS:

.grid-arrow {
    position: relative;
    text-align: center;
    background-color: red;
    line-height: 2em;
    border-top:300px solid #fff;
    top:-300px;
}
.grid-arrow::after {
    content: "";
    position: absolute;
    left: 0;
    background-color: red;
    padding-bottom: 50%;
    width:57.7%;
    z-index:-1;

    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;

    -webkit-transform: rotate(-30deg) skewX(30deg);;
    -ms-transform: rotate(-30deg) skewX(30deg);
    transform: rotate(-30deg) skewX(30deg);
}

For visual demonstration, visit this JsFiddle link.

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

Stop the div from collapsing when hiding or deleting all child elements to maintain its structure

I have recently developed a Vuetify application that manages card items. To ensure security and accessibility, I have added a feature where the actions/buttons are displayed based on the User's permissions. In case of missing permissions, these button ...

htmlcssvue.jsvuetify.js

The onChange function is not triggered when the dropdown menu consists of only one item

I am facing an issue with my dynamically populated dropdown menu. When the dropdown contains only one element, the onChange() function of my select tag does not work as expected. It functions perfectly fine when there are multiple elements present. How c ...

javascripthtmlreactjs

Issues with retrieving $_POST values from a select form in PHP

When the button is clicked, I am sending a AJAX request to my PHP page using POST method with the selected data from a SELECT element. However, I am facing an issue where my PHP IF statements are not evaluating as true. It always defaults to the ELSE condi ...

javascriptphpjqueryhtmlajax

"When implementing an Ajax autorefresh feature, ensure you pass the necessary variables consistently to update the content. Don't overlook

My chat box consists of two frames... The first frame displays all the usernames, while the second frame shows the full chat when a user is clicked from the first frame. I need to reload the second frame every time to check for new messages from the send ...

jqueryajaxhtmljsp

Javascript: when onkeyup clashes with onsubmit

I configured two functions to event listeners within a form. One attached to an onsubmit action for the <form> and another one tied to an onkeyup action on an <input> inside the form. This form lacks a search button, requiring users to press e ...

javascripthtmlajaxdom

Unable to set the correct title view for mobile devices

We have successfully styled the products for desktop view and larger phones, but we are facing challenges in adjusting them properly for smaller phones. Below you will find a photo and corresponding code snippets: /* Products list - view list */ .product ...

css

Exploring different categories within WordPress

I have a variety of products that will be sorted into different categories when selected. My goal is to display specific images based on the categories that are clicked. For example: If I click category A, then image (A) should appear. Below is the cod ...

phphtmlcsswordpressloops

Troubleshooting Error in Python Selenium: Unable to Locate Element Using Link Text

I need to target the specific element "seltarget" from a list of options. HTML: <div class="filter-item" data-reactid=".3.1.0.0.1.0.0.3.0.0.0.3">seltarget</div> When exporting to a Python file, it suggests locating the element by xpath: dri ...

pythonhtmlseleniumselenium-webdriver

Ways to update an iFrame using AJAX every 5 seconds

I have been attempting to dynamically update an iFrame using AJAX in order to prevent any blinking on the page. The current code I am using seems to be functional, but it consumes a large amount of memory and eventually crashes the entire page. I am lookin ...

javascriptjqueryhtmlajaxiframe

What are the steps for showcasing a personalized HTML tag on a web page

I need to capture user input text and display it correctly. This is what I have attempted: <div> <input type="text" ng-model="post.content" /> </div> <div> <div ng-bind-html="post.content| htmlize"></div> < ...

javascripthtmlangularjs

Dragging elements with jQuery to move them outside of a side panel

For a hidden panel, I am utilizing the script mentioned below. I have listed some boxes in the panel and attempted to drag them and drop them onto a workspace. This is a demonstration that works with HTML5. <a id="simple-menu" href="#sidr">Jobs< ...

javascriptjqueryhtmljquery-ui-draggablejquery-ui-droppable

Angular 9: The instantiation of cyclic dependencies is not allowed

After transitioning from Angular 8 to Angular 9, I encountered an issue with a previously functioning HTTP communication service. The error message now reads: Error: Cannot instantiate cyclic dependency! HttpService at throwCyclicDependencyError (core ...

htmlangulartypescriptangular9

Handling successful form submissions in HTML

I need to add a success event handler to a basic HTML post form with the following markup: <form action="/Home/UpdateMessage" method="POST"> ... </form> After sending the form, my server responds with: return Json(true, JsonRequestBehavior.A ...

htmlajaxformspostmodel-view-controller

Ensuring Content Alignment to the Left in Mobile View with BootStrap Rows

I'm in the process of building a website using Bootstrap. When viewing the webpage on desktop, everything looks great. However, when I switch to mobile view, the cards are not displaying as I would like them to. In mobile view, the cards are aligned ...

htmlcssbootstrap-4

Navigating HTML and clicking on links

Currently, I am working on a code that is designed to open a URL, locate the 3rd link, and repeat this process three times with the new URL. However, I am facing a challenge where the code seems to restart with the original URL every time. Could someone p ...

pythonhtmlloopsfor-loopbeautifulsoup

Footer Troubles on Internet Explorer 11

I am experiencing an issue with the layout in Mozilla and IE 11. The content inside the Div is appearing below the footer, as shown in the screenshot provided. Below you can find the code for the div and the footer sections. The Div is enclosed within a se ...

htmlcssbootstrap-4

Tips on resolving issues with form input that is not accepting input on a Mobile device

As a newbie in HTML and CSS, I attempted to design a form with various fields. While the fields work perfectly on larger screens, they do not allow input on smaller screens (mobile devices). I used the Firefox inspect tool to troubleshoot the issue, but c ...

htmlcssbootstrap-4

Guide: Building Angular/Bootstrap button checkboxes within a loop

I am in the process of designing a grid (table with ng-repeat) in which each row contains 4 columns of buttons. My goal is to use checkboxes as the buttons, like the Angular/Bootstrap btn-checkbox, so that they can be toggled on and off. I plan to set thei ...

javascriptjqueryangularjstwitter-bootstrapangular-ui-bootstrap

What is the best way to ensure a div automatically adjusts its height to fit the screen, and expands if the content goes

My website features a div that expands in height to match the screen size. Below is the CSS I am using: .round-cornerapp { -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -o-border-radius: 5px 5px 5px 5px; ...

htmlcss

Ways to efficiently update styles dynamically using css and/or javascript

I am trying to update the styles of a button when it is clicked. I initially set the style for the first element on page load, but now I need to remove those styles from the first element and apply them to the clicked button instead. I am having trouble fi ...

javascripthtmlcssknockout.js