Utilizing the background-clip property with a gradient overlay

My Objective: https://i.sstatic.net/DscXK.png

My goal is to have both the arrow container and the full-width bar share the same gradient. I initially tried creating them separately and applying the gradient individually, but it resulted in a clipped look.

Codepen: https://codepen.io/sigurdmazanti/pen/bGarpvJ

Snippet: 

.container {
  background: white;
  width: 100%;
  height: 71px;
}

.arrow-container {
  height: 34px;
  width: 118px;
  border-radius: 15px 15px 0 0;
  text-align: center;
  margin: 0 auto;
  color: white;
  background: transparent linear-gradient(180deg, #415fb4 0%, #0e2460 100%) 0 0 no-repeat padding-box;
}

.bar {
  height: 37px;
  background: transparent linear-gradient(180deg, #415fb4 0%, #0e2460 100%) 0 0 no-repeat padding-box;
}
<div class="container">
  <div class="arrow-container">&#x2191;</div>
  <div class="bar"></div>
</div>

I then thought of using a full-width and full-height overlay with the gradient, and utilizing background-clip to clip the elements so they both share the gradient. However, I'm facing some challenges with this approach and it seems like I might be implementing it incorrectly.

Codepen: https://codepen.io/sigurdmazanti/pen/popryWz

Snippet:

.container {
  overflow: hidden;
  background: white;
  width: 100%;
  height: 71px;
}

.bg-gradient {
  background: transparent linear-gradient(180deg, #415fb4 0%, #0e2460 100%) 0 0 no-repeat padding-box;
  background-clip: content-box;
  width: 100%;
  height: 100%;
}

.arrow-container {
  height: 34px;
  width: 118px;
  border-radius: 15px 15px 0 0;
  text-align: center;
  margin: 0 auto;
  background-color: red;
}

.bar {
  height: 37px;
  background-color: red;
}
<div class="container">
  <div class="bg-gradient">
      <div class="arrow-container">&#x2191;</div>
      <div class="bar"></div>
  </div>
</div>

I cannot use ::after & ::before pseudo-elements as the arrow-element requires an event handler. Am I heading in the right direction, or is this outcome achievable?

Thank you!

htmlcssgradientbackground-clip

Answer №1

To create a gradient with height equal to the sum of both elements and control the size:

.container {
  background: white;
  height: 71px;
}

.arrow-container {
  height: 34px;
  width: 118px;
  border-radius: 15px 15px 0 0;
  text-align: center;
  margin: 0 auto;
  color: white;
  background: 
  linear-gradient(180deg, #415fb4 0%, #0e2460 100%) top/100% 71px;
}

.bar {
  height: 37px;
  background: 
  linear-gradient(180deg, #415fb4 0%, #0e2460 100%) bottom/100% 71px;
}
<div class="container">
  <div class="arrow-container">&#x2191;</div>
  <div class="bar"></div>
</div>

Alternatively, achieve the same effect using pseudo-elements:

.container {
  background: white;
  height: 71px;
  position:relative; /* relative here */
  z-index: 0;
}

.arrow-container {
  height: 34px;
  width: 118px;
  border-radius: 15px 15px 0 0;
  text-align: center;
  margin: 0 auto;
  color: white;
}

.bar {
  height: 37px;
}

.arrow-container,
.bar {
 -webkit-mask:linear-gradient(#000 0 0); /* clip the gradient to the element area */
}

/* your gradient here */
.arrow-container:before,
.bar:before {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, #415fb4 0%, #0e2460 100%);
  z-index:-1;
}
<div class="container">
  <div class="arrow-container">&#x2191;</div>
  <div class="bar"></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

Developing web applications using Express.js and Jade involves connecting CSS stylesheets

I'm currently in the process of developing a web application using Express.js along with some Bootstrap templates. I utilized jade2html for conversion, and while the page loads successfully, it lacks any styling. The following code snippet is what I ...

htmlexpresspug

Is it possible to apply CSS to the alert and confirm functions in Angular?

Currently, I am facing an issue with implementing CSS on elements that are nested inside a function. I am unsure of how to access them properly. For example: updateUser() { this.usersService.UpdateUser(this.user.id, this.user) .subscribe(() =& ...

cssangular

Tips for showing an image through a button in Angular 4

Currently, I am in the process of creating a simple website and I have encountered an issue. When I click on a button to display an image, it works fine. However, when I click on another button to display a different image, the previous image remains visib ...

htmlangulartypescript

I am experiencing an issue where my mobile responsive website consistently shows the smallest CSS width view. What could be the root of this

Currently, I am developing a mobile-responsive website specifically catered to iPhone 6 Plus and smaller models (iPhone 6 & 5 included). When I preview the site using "Inspect Element" in the Chrome browser with these device settings, everything appears t ...

iphonecssresponsive-design

How well does position:fixed function in Internet Explorer versions 7, 8, and 9?

Before diving into using position:fixed, I'd like to confirm if it works well in Microsoft browsers. Thank you. ...

cssinternet-explorer

When transitioning to mobile size, I aim to maintain the consistent design of my background-color circle using Bootstrap 5

I am working on creating a card design with a colored background instead of an image. However, I am facing an issue where the rounded-circle background color changes to an ellipsoid shape after passing the mobile size (sm or xs). Here is what I am aiming ...

cssmdbootstrap

Tips for monitoring a field within an angularJS factory

Within my web application, I am utilizing a factory. This factory contains an object named mapLayers. Within my controller, I am assigning this factory.mapLayers object to a variable on the scope called $scope.mapLayers and using ngRepeat to iterate over i ...

javascripthtmlangularjsng-bind

What is the best way to pass createdDt and updatedDat values in an Angular form without displaying them on the template?

I am working on a message creation form in Angular where I need to include createdDt and updatedDt as hidden values. These values should not be visible in the template. I want to automatically set the current date and time for both createdDt and updatedD ...

htmlangulartypescriptangular-forms

Press the button to use PHP to remove a row from MySQL by its corresponding ID

Hey there, I'm facing an issue with my HTML form. I have a button named "delete" and next to it, there's an input field where the logged-in user is supposed to enter a number corresponding to an ID and then press the delete button to remove the r ...

phphtmlmysql

What is the best way to generate a table with continuously updating content?

If the user input : $sgl = 2; $dbl = 0; $twn = 1; $trp = 0; $quad = 0; $price_room = 250000; I want the result looks like the picture below : https://i.sstatic.net/iQYqr.jpg I have tried the following code : <?php $sgl = 2; $dbl = 0; ...

phphtmlcss

The default action is not triggered when the click event occurs

Hey there, I have been working on this <ol> list of events using jQuery (version 1.4.2). Everything is set up within the $(document).ready() function. Something strange is happening where when I click on the <li>, it triggers a click on the co ...

javascriptjqueryhtmlevents

Tips for effectively placing a page scope block using BEM

Here is the current structure of my header. The page component is assumed to be the root. Currently, the geometry of the social-links block is being controlled by the header__social-links mix (positioned absolutely relative to the header). How can I prop ...

htmlcssbem

Retrieve the initial 100 links using XPath and PHP

I wrote the following code to extract href's (links) from a web resource that contains more than 1000 links: $dom = new DOMDocument(); @$dom->loadHTMLFile('https://www.domain.me/'); $xpath = new DOMXPath($dom); $entries = $xpath->quer ...

phphtmldomxpath

Issues with table-cell rendering in Chrome

I have three different divisions that I would like to showcase as table cells: <div class="field"> <div class="row"> <label for="name">Subdomain</label> <input type="text" id="name" name="name"> &l ...

cssgoogle-chrome

HTML checkbox URL

Can you design an HTML checkbox form that generates a URL format like this: ?cat=cars+tree Currently, with the following code: <form name="input" action="/" method="post" > <br />Select Categories: <br /> <input type="checkbox" name ...

htmlurlcheckbox

Image encoded in base64 not appearing on the screen

Hey there, I'm currently working on implementing a jQuery image uploader that generates a base64 code when an image is selected. function readImage(input) { if (input.files && input.files[0]) { var FR= new FileReader(); FR.onload ...

javascriptjqueryhtmlimage

Trigger a function from a Bootstrap modal

Here is a preview of my HTML code : <form action="form2_action.php" method="post"> <table> <tr> <td>First Name </td> <td>:</td> <td><input type="text" id="f ...

javascriptjqueryhtmlcsstwitter-bootstrap

Need to know how to retrieve the li element in a ul that does not have an index of 2? I am aware of how to obtain the index greater than or less

I'm looking to hide all the li elements except for the one with a specific index. I've written some code to achieve this, but I'm wondering if there's a simpler way using jQuery. While jQuery provides methods like eq, gt, and lt, there ...

javascriptjquerycss

Struggling with configuring a personalized version of Bootstrap 4 in Sass

I am currently in the process of creating a custom version of Bootstrap 4. One of the main changes I want to make is switching the default color ("primary") from Bootstrap Blue to something different. Initially, I made the edits directly to the Bootstrap ...

cssbootstrap-4sasscustomization

When you have a target element that is deeply nested, consider using a 50% height relative to

There is some confusion surrounding the issue below: <div class="container"> <div class="row"> <div class="group"> <a> <div class="col-lg-3 full-h"></div> </a> <a> < ...

htmlcssheight