Using various CSS border tricks, it's possible to create a trapezoid shape. Additionally, setting the border-color to rgba(r,g,b,a) can make it transparent.
However, is there a way to create a trapezoid with both transparent borders and background?
Refer to the image below for an example,
Currently, I rely on PNG images to achieve this effect, but generating images of different sizes can be tedious. Therefore, I am in search of a CSS solution.
In my opinion, it may seem like a lot of work, but here is how you can achieve it:
Here is the HTML code:
<div class='outer'>
<div class='content'><!--your content here--></div>
<div class='label l1'></div>
<div class='label l2'></div>
</div>
And this is the CSS code:
.outer {
position: relative;
width: 500px;
border: solid .5em rgba(0,0,255,.5);
border-bottom: solid 0px transparent;
margin: 7em auto 0;
background: rgba(0,0,0,.5);
background-clip: padding-box;
}
.outer:before, .outer:after {
position: absolute;
top: 100%;
height: .5em;
background: rgba(0,0,255,.5);
content: '';
}
.outer:before { left: -.5em; width: 15%; border-left: solid .5em transparent; }
.outer:after { right: -.5em; width: 55%; border-right: solid .5em transparent; }
.content {
padding: .5em;
margin: 1.5em;
border-bottom: solid 1.5em transparent;
background: lightblue;
background-clip: padding-box;
}
.label {
overflow: hidden;
position: absolute;
top: 100%;
width: 15%;
height: 3em;
}
.l1 { left: 15%; }
.l2 { left: 30%; }
.label:before {
position: absolute;
top: -.5em;
width: 100%;
height: 2.5em;
border: solid .5em rgba(0,0,255,.5);
background: rgba(0,0,0,.5);
background-clip: padding-box;
content: '';
}
.l1:before { left: 9%; transform: skewX(30deg); }
.l2:before { right: 9%; transform: skewX(-30deg); }
This design is compatible with Firefox, Chrome, Opera, and Safari (although I recommend testing in IE9 as well). Keep in mind that for it to work properly, the width value for .outer must be a multiple of 100px.
If the width is not a multiple of 100px, there might be some display issues in browsers other than Firefox and Chrome. In such cases, adjustments may need to be made, especially in Webkit-based browsers like Chrome.
Please note that if the width is not a multiple of 100px, the design may break in Opera and Safari:
If you want to achieve a trapezoid shape with transparent background and border colors, keep in mind that the borders will not perfectly align with the shape:
http://jsfiddle.net/Kyle_Sevenoaks/UZbJh/2/
For now, it's recommended to use png images for better results.
Currently, I am in the process of familiarizing myself with expressjs. In my journey to learn this technology, I have encountered a controller that performs queries on a database and returns a JSON object with certain key-value pairs. An example of such an ...
There are two instances where the Items component needs to be displayed. However, in one instance an additional component, Filters, is required while in another it is not. The Filters component is nested inside Items. When attempting to implement this, ...
DisablePaginationButton("first"); The statement above successfully disables the first element that is fetched. DisablePaginationButton("second"); ===> not functioning function DisablePaginationButton(position) { $(".pagination a:" + position).ad ...
I'm currently working on a project that involves adding an avatar and a dropdown menu for account settings to my navigation bar. I've already created the dropdown, but I'm having trouble styling the avatar within the button. The button is ta ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Assignment 2 - Website Bui ...
It seems that despite following all the necessary steps in my CSS, I am facing an issue with a transition not working properly in Firefox. The bounce-in effect I have implemented is failing to function as expected in this browser, even though Firefox does ...
<span>Educating children on unlocking their creative and intellectual potential through the world of Computer Science.</span> Here is the HTML code provided above along with the corresponding CSS: span { text-decoration: underline; color: red ...
With Bootstrap 5, I have a modal that contains two tabs for login and register. However, I am facing an issue where the tab is not displaying correctly based on the button click. The desired behavior is that clicking on the login button should activate th ...
Can a sequence of selectors and methods be generated within a loop? For instance, assuming an array of elements is given: array[0] = '.type1value1, .type1value2, .type1value3'; array[1] = '.type2value1, .type2value2, .type2value3'; ar ...
I have just completed writing a Javascript code with around 3,000 lines. This code contains over 60 variables, but there are a few specific variables that I would like to display on my main HTML page. These variables include: totalTime longitudinalAcceler ...
In my HTML, I have a div that includes 4 radio inputs, and another div with an onClick event that increments a counter. Every time I click on the div, I want the radio inputs to reload so that no input is selected. Below is the code snippet: 'use clie ...
I have successfully retrieved the initial level of JSON Data, which consists of objects/Product List. My objective is to implement a functionality where clicking on the "View Details" button will redirect to the respective product detail page, similar to ...
I am currently exploring the behavior of React within Next.js. I have an index.js page that displays one component Homecard three times and a button that increments a value. Each time I click on the button, all Homecard components are re-rendered. index. ...
I have a doubt that I'm trying to clarify, but unfortunately it's not mentioned in the Bootstrap 4 documentation. Can someone explain the difference between these two code snippets? <div class="container"> <div class="row"> < ...
My challenge is having related and neighboring table columns grouped within the same component in Vue.js. However, I'm facing a limitation with the template system where only one tag can be directly placed inside <template>. Typically, this wrap ...
I am just starting to explore Angular and I want to tackle some more advanced input validation. My task involves a table where each row has three text inputs. I need to validate that at least one row has three non-empty input fields. If this criteria is m ...
I'm attempting to generate an array using data retrieved from an API. However, I continue to encounter an error message stating cannot read property 'push' of undefined in Javascript. Could someone please guide me on how to resolve this iss ...
I'm in the process of creating a program that automatically navigates to a website and prints a page. Unfortunately, I'm encountering difficulties in getting it to function properly. I've attempted using the selenium chrome driver, but with ...
I'm in the process of creating "overview" pages for different sections within my app, each triggered from the root of that particular section. For example, localhost/hi should display the HiOverview component, And localhost/he should display the HeO ...
On my menu page, I have two images that I want to display side by side in the web browser and stacked on top of each other in a column when viewed on mobile. Currently, with framework7's row and column classes, the images are positioned next to each o ...