Creating an arrow shape with a dynamically adjustable width using pure CSS

Looking to create a container with an upward arrow attached to it, but encountering some challenges. I've used the border drawing trick in the past, which seems like a possible solution. However, it seems limited to specific sizes since you need to specify border in em or px.

The shape I have in mind looks something like this:


          .
         / \
        /   \
       /     \
      | flex  |
      |       |

Where the content area can adjust its size based on a percentage of the parent container.

Below is the CSS code, highlighting the problematic section:

.metric {
    display: inline-block;
    position: relative;
    height: 150px;
    width: 50%;
    background: lawngreen;
}

.metric:after {
    position: absolute;
    top: -25px;
    left: 0;
    content: '';
    background: white;
    width: 100%;
    height: 0;
    border: 75px solid white; /* this fixed width is the problem */
    border-top: none;
    border-bottom: 25px solid lawngreen;
    box-sizing: border-box;
}

Explore the jsfiddle link for a visual representation: http://jsfiddle.net/C8XJW/2/

Does anyone have any ideas on how to achieve this design?

cssresponsive-designborder

Answer №1

Consider this alternative approach.

This technique utilizes gradient backgrounds to achieve a diagonal effect, requiring the use of two gradients:

Corresponding CSS:

.metric:before, .metric:after {
    position: absolute;
    top: -25px;
    content: '';
    width: 50%;
    height: 25px;
}
.metric:before {
    left: 0px;
    background: linear-gradient(to right bottom, transparent 50%, lawngreen 50%);
}
.metric:after {
    right: 0px;
    background: linear-gradient(to left bottom, transparent 50%, lawngreen 50%);
}

Revised Fiddle Link

The distinctions from the "Simple As Could Be" solution are as follows:

Pros: Transparent corners (especially advantageous with a background image)

Cons: Limited browser compatibility

Answer №2

Here's an innovative approach. Essentially, the arrow remains centered and larger than necessary, with any overflow trimmed off.

Check out the JSFiddle demonstration: http://jsfiddle.net/nBAK9/4/

Take a look at the intriguing code snippet below:

.metric:after {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -250px;            /* half of maximum expected width */
  content: '';
  background: white;
  width: 500px;                   /* maximum expected width    */
  height: 0;
  border: 250px solid white;      /* half of maximum expected width */
  border-top: none;
  border-bottom: 50px solid #cf6; /* Adjust this value to modify the triangle slope */
  box-sizing: border-box;
}

Answer №3

If you're wondering whether it's possible, I experimented with it and found that by leveraging the fact that em inherits from its parent elements, you can manipulate it to some extent.

body{
    font-size: 3em;
}

div {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 3em 4em 7em;
    border-color: transparent transparent #007bff transparent;
    -webkit-transform:rotate(360deg)
}

Check out the Fiddle for a demonstration

Answer №4

.top-arrow:before, .top-arrow:after {
    position: absolute;
    top: -25px;
    content: '';
    width: 50%;
    height: 25px;
}
.top-arrow:before {
    left: 0px;
    background: linear-gradient(to right bottom, transparent 50%, black 50%);
}
.top-arrow:after {
    right: 0px;
    background: linear-gradient(to left bottom, transparent 50%, black 50%);
}


<div class="top-arrow"></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

Using scope in ng-style to manipulate a portion of a CSS property value in Angular

I've been attempting to add a border using ng-style, but I'm struggling to figure out how to concatenate the value from the scope variable. None of the methods below seem to be working for me: <div ng-style="{'border-top' :'1p ...

javascriptcssangularjs

What steps should I take to have a specific input prompt a certain action?

I am currently working on creating a function that checks when a user inputs a number between 0 and 8, triggering an action corresponding to that specific number. For example, if the user enters 5, a picture and text should appear; whereas if they input 3, ...

javascripthtmlcss

How can the parent div's height be determined by the child div when using position: absolute?

I am struggling with setting the height of a parent div that contains a nested child div with absolute positioning. The child div has a fixed height of 652px, but I cannot seem to get the parent div to match this height. I have tried adjusting the clear an ...

htmlcsspositionheightabsolute

Incorporating fresh CSS styles through Selenium

I am attempting to showcase all the prices available on this page using Selenium and Chrome in order to capture a screenshot. By default, only 3 prices are visible. Is there a way to disable the slick-slider so that all 5 prices can be seen? I have tried r ...

pythoncssseleniumweb-scrapingslick.js

How can I create a CSS grid with two groups of columns, each occupying 50% of the grid?

My goal is to create a CSS grid layout with 6 columns, but I want to divide them into 2 groups of 3 columns each. Each group should take up 50% of the width, and be left-aligned. For example: #parent { width: 100%; display: grid; grid-template-r ...

htmlcsscss-grid

What is the process for implementing a unique font style to the placeholder, text box, and button elements on a website?

I am looking to incorporate a unique font from my computer for the placeholder and button text. Here is how I defined my @font-face: @font-face { font-family: customfont2; src: url(Font/otf/segment14.regular.otf); } Currently, I a ...

htmlcssbuttonfont-faceplaceholder

Utilizing consistent CSS styles across VueJS components

Currently tackling a VueJS 2 project and facing issues with scoped styling when cleaning up the code. My setup involves 3 components that share similarities, prompting me to utilize mixins for consolidating the code into one file. Each component makes use ...

cssvue.jsscopevuejs2mixins

Issue with z-index in Internet Explorer version 7

Currently, I have implemented a drop-down list using jQuery that activates when the user hovers over the main menu. This functionality is working appropriately in all browsers except for IE7 and earlier versions. In an attempt to ensure the drop-down menu ...

htmlcssinternet-explorer-7z-index

Does embedding an Iframe for external files from your server enhance the loading speed of the current page compared to directly loading it on the page?

I'm facing an issue with the loading time of a Facebook post on my webpage index.php. The current method of using the embedded post provided by Facebook is taking too long to load. My solution is to create a separate page, post.php, where only the Fac ...

javascriptphphtmlcssiframe

Dynamic JavaScript tool

Does anyone know which library is being used on the website linked here? I am working on a project similar to this and would appreciate if anyone can identify this library for me. Thank you in advance. ...

javascripthtmlcss

Adjust the transparency of a distant div element by using CSS checkboxes without any JavaScript

I'm faced with the challenge of manipulating the opacity or animating an array of items that are all contained within a single div. In addition to altering the opacity of each individual item, I also want to change the opacity of the entire div and it ...

csscss-selectorspseudo-elementpseudo-classcombinators

What is causing the inconsistency and instability in this jQuery sortable configuration?

I have created a page where users can interact with green blocks by dragging and re-ordering them from one sliding area to another. Sometimes, however, the dropping and sorting functionality is unreliable. The boxes may align incorrectly or the drop area m ...

jquerycssjquery-uijquery-ui-sortable

Exclusive Chrome Bug Found in Form Tag

My webpage functions flawlessly on IE 7, 8, and 9, Firefox, Safari, and Opera. However, when I view it on Chrome, the positioning of the DIV containing the form is not always correct. If I remove the form tag, the issue goes away. There are no floats, only ...

htmlcssformsgoogle-chromeposition

Troubleshooting the Width Problem in Bootstrap 5 Dropdowns

I am currently working on a new project and encountering an issue with the width of a Bootstrap 5 dropdown. The problem lies in the discrepancy between the button width and the menu width. Although it may seem simple, I am having trouble resolving it as I ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Center-align an input and button vertically within a div

I am facing an issue with aligning my search setup vertically inside a div Below is the code I have written: HTML: <div class="search"> <input class="searchfield" type="text" placeholder="Search..." value="" />&nbsp;<button class="sea ...

htmlcssvertical-alignment

Showing a lengthy numerical value in a disabled input field

When I enter a lengthy input into an input field with type="text", the value is stored correctly in the database. However, after clicking the submit button, the input field is disabled, displaying only the length of the text input. Is there a way to disp ...

htmlcssinputtext

How to implement a delay for submenu dropdown in Bootstrap 3

I am trying to implement a delay on a submenu that I have created, rather than the entire bootstrap3 dropdown menu. The goal is to allow users to easily move their cursor to the submenu without it closing unexpectedly. Although the jquery code should still ...

javascriptjqueryhtmlcsstwitter-bootstrap

Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code: <p-tabView class="tabmain" > <ng-container *ngFor="let tab of tabs"> <p-tabPanel [header]="tab.header" > ...

cssangulartypescriptprimengprimeng-turbotable

Large Quotation marks with an HTML/CSS design

Is there a way to style a quote using large quotation marks? I've tried various methods found online, such as using Blockquote with the :before and :after CSS styles. However, I'm running into issues with using an image within a div for responsi ...

htmlcsstwitter-bootstrapblockquote

What is the best way to add a media query to a <style> element?

I have implemented Skrollr for my Parallax animations, allowing me to use Parallax keyframes without writing them inline. To make the plugin utilize external stylesheets for the keyframes, it uses AJAX to locate the stylesheets imported via <link>. ...

jquerycssajaximportcss-animations