Container with adjacent gradient CSS shape

I am currently working on a unique design concept for a website we are developing. The header requires a parallelogram shape above it and a trapezium shape to the right of the container, as illustrated below.

Successfully implementing the parallelogram above the container was achievable, but I am encountering difficulties when trying to position the element to the right of the container. Here is what I have accomplished so far:

HTML

<div class="container">
  <div class="row">
    <div class="col">
      Content Goes Here
    </div>
  </div>
</div>

CSS

.container {
  width: 700px;
}

.container:before {
  content:'';
    width: 100%;
    height: 30px;
    transform: skew(45deg);
    background: #254896;
    background: linear-gradient(90deg, #254896, #2c2b5b 100%);
    display: block;
}

.row {
  background: #f8f9fa;

}

.row:before {
    content:'';
    width: 100%;
    height: 0;
    border-image-source: linear-gradient(90deg, #FF0000, #940202);
    border-image-slice: 1;
    border-top: 30px solid red;
  border-left: 30px solid transparent;
    position: absolute;
    left: 800px;
    top: 30px;
}

.col {
  background-color: #ddd;
  padding: 10px;
}

https://jsfiddle.net/scarrott/vgtpna14/

The challenges I am facing include:

  • Ensuring the red shape aligns properly to the right of the container across various screen sizes.
  • Applying a gradient fill to the trapezium shape without distorting its geometry. Using border-image-source causes the shape to appear as a rectangle.

Your assistance in resolving these issues would be highly appreciated.

htmlcssbootstrap-4linear-gradients

Answer №1

Here's a creative approach using multiple background layers. I've set the width to 400px for better visibility within the snippet.

body {
  overflow-x: hidden;
}

.container {
  --w:400px;
  max-width: var(--w);
  position: relative;
  margin: 40px auto;
}

.container:before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: calc(50vw + var(--w)/2);
  min-width: 100%;
  height: 40px;
  transform: skew(45deg);
  transform-origin: top;
  background: 
    linear-gradient(90deg, #254896, #2c2b5b 100%) top left/var(--w) 50%, 
    linear-gradient(90deg, #FF0000, #940202) bottom right /calc(100% - var(--w)) 50%;
  background-repeat: no-repeat;
}

.row {
  background: #f8f9fa;
}

.col {
  padding: 10px;
}
<div class="container">
  <div class="row">
    <div class="col">
      Content Here
    </div>
  </div>
</div>

Here's another idea utilizing clip-path:

body {
  overflow-x: hidden;
}

.container {
  --w:400px;
  max-width: var(--w);
  position: relative;
  margin: 40px auto;
}

.container:before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: calc(50vw + var(--w)/2);
  min-width: 100%;
  height: 40px;
  clip-path:polygon(0 0, calc(var(--w) - 20px) 0,var(--w) 50%,100% 50%,100% 100%,calc(var(--w) + 20px) 100%,var(--w) 50%, 20px 50%);
  background: 
    linear-gradient(90deg, #254896, #2c2b5b 100%) top left/var(--w) 50%, 
    linear-gradient(90deg, #FF0000, #940202) bottom right /calc(100% - var(--w)) 50%;
  background-repeat: no-repeat;
}

.row {
  background: #f8f9fa;
}

.col {
  padding: 10px;
}
<div class="container">
  <div class="row">
    <div class="col">
      Content Here
    </div>
  </div>
</div>

An example incorporating Bootstrap:

body {
  overflow-x: hidden;
}

.container {
  --w: 540px;
  position: relative;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .container {
    --w: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    --w: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    --w: 1140px;
  }
}

.container:before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: calc(50vw + var(--w)/2);
  min-width: 100%;
  height: 40px;
  clip-path: polygon(0 0, calc(var(--w) - 20px) 0, var(--w) 50%, 100% 50%, 100% 100%, calc(var(--w) + 20px) 100%, var(--w) 50%, 20px 50%);
  background: 
    linear-gradient(90deg, #254896, #2c2b5b 100%) top left/var(--w) 50%, 
    linear-gradient(90deg, #FF0000, #940202) bottom right /calc(100% - var(--w)) 50%;
  background-repeat: no-repeat;
}

.row {
  background: #f8f9fa;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col">
      Content Here
    </div>
  </div>
</div>

Answer №2

One alternative method could involve placing the two parallelogram shapes within the container div using specific percentage values.

    .row::before {
      content: '';
        width: calc(60% - 14px);
        height: 40px;
        transform: skew(45deg);
        background: #356784;
        background: linear-gradient(90deg, #356784, #3a397d 100%);
    }

    .row::after {
        content: '';
        width: calc(40% - 14px);
        height: 40px;
        position: absolute;
        right: 0;
        top: 40px;            
        transform: skew(45deg);
        background: blue;
        background: linear-gradient(90deg, #0000FF, #050505);
    }

jsFiddle

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

Creating a grid cell that spans the entire grid width

Snippet of CSS Code: .wrapper { display: grid; position: relative; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 25vh; width: 100%; } .prova { border: 1px solid; } .wrapper div:nth-child(2) { grid-column: 3; grid-row: 2 / 4; ...

htmlcssgrid

Location tracking functions only operational when using the local host

I managed to successfully integrate geo-location on my website while testing it on localhost. But, when I uploaded the website to an online server, I encountered a problem. I started receiving a bool(false) error message. Geo.php <?php class G ...

phpjqueryhtmlgeolocation

Ensure that the icon at the conclusion of the <p> tag remains intact and does not break off on its

Issue at hand: The clock icons on my phone screen sometimes break off, see example here: https://i.sstatic.net/NQz9i.png Preferred outcome: The icons should be intact along with the time value, like this: https://i.sstatic.net/nZmC9.png Here is the H ...

cssvuejs3bootstrap-5

Position the div element beside the image, rather than below it

I am having an issue with Bootstrap where the card I want to display on the right of an image is appearing below it instead. I attempted to use the display: inline-block property, but unfortunately, that did not solve the problem. I also explored other so ...

htmlcsstwitter-bootstrapbootstrap-5

"Interactive Connect 4 Game in Javascript - Drop the disk into the bottom row of the chosen

Check out this awesome Connect4 game I found: http://codepen.io/anon/pen/lmFJf I have a specific goal in mind for the game. When I click on an empty space in any column, I want it to automatically drop into the lowest available spot in that column, follow ...

javascripthtmlcss

Customizing browser titles for various article pages on Joomla 3.2 for improved SEO performance

Is there a way to incorporate unique browser titles for various article pages? Additionally, I am seeking guidance on how to integrate distinct meta tags for different pages within a Joomla website... ...

htmljoomlatwitter-bootstrap-3joomla3.0

Can you have two navigation bars and a picture all in one Bootstrap layout?

I have a requirement to use a single image on two different Bootstrap navbars. However, the issue is that the image appears split between the two navbars.https://i.stack.imgur.com/jUnIL.png My goal is to display the full image without it being divided bet ...

csstwitter-bootstrapnavbar

What is the best way to assign a percentage width based on a variable in jQuery?

Is there a way to assign a dynamic width value to an element? Here is the code I am using: $(".menu_list_item").css({ width: width + "%" }); Unfortunately, this doesn't appear to be functioning correctly. If anyo ...

javascriptjquerycss

Why is it not achievable to dynamically update the HTML DOM structure while `<!DOCTYPE html>` is specified?

The following HTML code is causing an issue: <!DOCTYPE html> <html> <head> <title>Clear a Timer</title> <meta charset="utf-8" /> <script> var theTimer, xPosition = 0, theImage; functio ...

html

Issue with Reactstrap Bootstrap Navbar functionality within a React application

After using 'create react-app' to create a new React app, I decided to include a navbar from Reactstrap. Following the instructions on the Reactstrap website, I copied and pasted the code for the navbar component: import React from 'react&a ...

reactjsbootstrap-4navbarcreate-react-appreactstrap

When dalekjs attempted to follow a hyperlink with text in it, the link failed to function properly

My goal is to retrieve an element from a list by clicking on a link containing specific text. Here is the HTML code snippet: <table> <td> <tr><a href='...'>I need help</a></tr> <tr><a href=&a ...

javascripthtmlcssdalekjs

Having trouble incorporating a bootstrap template into my Angular project: Whenever I add the styling files, the application ceases to function

I'm currently working on incorporating a Bootstrap template into my Angular project, which already utilizes Bootstrap. Check out my Angular project https://i.sstatic.net/SKzRk.png. Now, I'm focusing on integrating the "Ethereal" scrolling templa ...

angularbootstrap-4

CSS - Revealing an element on the backface post flip animation

I encountered an issue while working on a CSS flip card project. Despite using backface-visibility: hidden;, one element remains visible from the other side. In the simplified snippet provided, if you click on more in the bottom right corner, the card fli ...

css

Position tables on the right side of adjacent tables

There are two tables named id="BFCategories" and "BMICategories". Additionally, there are two other tables with id="BFTable" and "BMITable" BFCategories should come after BFTable, while BMICategories should follow BMITable. How can I a ...

htmlcss

Conceal div elements and retain their status when the page is reloaded or switched

I currently have 3 div elements displayed on a webpage: header-div fixed_menu_div page_cont Each of these divs are styled with the following CSS properties: #header-div { top:0; left:0; display:inline; float:left; } #page_cont { mar ...

javascriptjqueryhtmlcss

Unable to render HTML in Simple Product Name on Magento platform

Is there a way to include HTML in my basic product titles, such as: <strong>A.</strong> Product Title Name However, the frontend displays these HTML tags. Is there a method to enable parsing of all HTML tags? ...

phphtmlmagento

Errors with pointer events occurring within nested iframes on Chromium 78

At first glance, it seems like a bug specific to Chromium. I have already reported this issue in a bug report. Since progress is slow on that front, I am posting a question here primarily to see if anyone else has encountered similar or related issues and ...

javascripthtmlcssiframechromium

Present XML data on an HTML page to generate interactive form features

I have an application that features a checkbox tree. I would like to automatically pre-select those checkboxes if the user had previously checked them. To achieve this, I receive XML data from my backend Perl script which contains information on which che ...

javascriptjqueryhtmlxml

The boundary extends fully to the right

Recently, I created a calculator to convert kilograms to pounds and encountered an issue when trying to add a border to a p element. The problem was that the border extended all the way to the right side of the page. Here is the corresponding HTML code: &l ...

htmlcssborder

Positioning searchbar on the right side in bootstrap 5

How can I fix the search bar on the right side of the screen within the Bootstrap navbar, without compromising its flexibility? I want it to always stay at the rightmost side regardless of the number of links in my navigation bar. As a beginner in CSS and ...

htmlcss