Is it possible to replicate the design in the image below using HTML, CSS, and the Bootstrap framework?
I would like to create two adjacent divs with a trapezoid shape (or separated by a diagonal line) while also giving them a border.
Is it possible to replicate the design in the image below using HTML, CSS, and the Bootstrap framework?
I would like to create two adjacent divs with a trapezoid shape (or separated by a diagonal line) while also giving them a border.
If you want to create a triangle shape using CSS, you can achieve this by manipulating the borders of an element with zero width.
One way to do this is by utilizing the :after pseudo-element to create the triangle effect, as demonstrated in the following code snippet:
.container > div {
width: 50%;
float: left;
font-weight: bold;
padding-left: 10px;
box-sizing: border-box;
margin: 0;
}
.container {
clear: both;
}
.container div:first-child {
background: #66ff66;
position: relative;
overflow: hidden;
}
.container div:first-child:after {
position: absolute;
display: block;
content: ' ';
padding: inherit;
box-sizing: border-box;
border-top: 1.3em solid transparent;
border-bottom: 1.3em solid transparent;
border-right: 1.3em solid #ff6666;
right: 0;
top: 0;
}If you prefer using div2 to create the triangle shape, you can follow this alternative approach:
.container > div {
width: 50%;
float: left;
font-weight: bold;
box-sizing: border-box;
margin: 0;
}
.container {
clear: both;
}
.container div:first-child {
background: #66ff66;
padding-left: 10px;
}
.container div:last-child {
background: #ff6666;
position: relative;
padding-left: 1.3em;
}
.container div:last-child:before {
position: absolute;
content: '';
width: 0;
height: 0;
box-sizing: border-box;
border-top: 1.3em solid #66ff66;
border-bottom: 1.3em solid transparent;
border-right: 1.3em solid transparent;
top: 0;
left: 0;
}To create a triangle shape with real borders, you can modify the approach by adding borders and rotating the shape. Here's an example based on a reference:
Example Reference
To visualize the concept, refer to the image below:
https://i.sstatic.net/eGErp.png
Here's the updated code snippet:
.container > div {
width: 50%;
float: left;
font-weight: bold;
box-sizing: border-box;
margin: 0;
}
.container {
clear: both;
}
.container div:first-child {
background: #66ff66;
padding-left: 10px;
border: 1px solid;
border-right: none;
}
.container div:last-child {
background: #ff6666;
position: relative;
border: 1px solid;
border-left: none;
padding-left: calc(1.5 * 1.3em);
overflow: hidden;
}
.container div:last-child:before {
position: absolute;
content: '';
width: calc(2 * 1.3em);
height: calc(2 * 1.3em);
box-sizing: border-box;
background: #66ff66;
border: 1px solid;
transform: rotate(45deg);
margin-top: -1.3em;
margin-left: -1.3em;
left: 0;
top: 0;
}Implement the border-right property as shown in the code snippet below and observe the outcome:
.container{
width: 100%;
display: flex;
background-color: #01579b;
}
.box1 {
width: 30%;
border-bottom: 100px solid #000;
border-right: 50px solid transparent;
}
.box2 {
width: 70%;
height: 100px;
}<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>Struggling to show an error message when a user disables JavaScript. In my current work, I have two div layers - one covering the entire page and another on top to display the warning message. However, I'm facing issues with the opacity settings affec ...
I am struggling to create an element that covers the entire page except for a 20px margin on all sides. I have tried implementing a solution using this code, which works in webkit browsers and Firefox but seems to have issues with Internet Explorer (10) an ...
I'm facing a challenge in creating a basic table layout where all the table rows are initially hidden when the document loads. The goal is to display specific rows when a corresponding button is clicked, but my current implementation doesn't seem ...
I am having an issue with my jQuery code where I have a button that, when clicked, should switch classes from #testButton to .first or .second. The image toggle shows that the first click works fine and toggles the image, but the second click does not seem ...
I am in search of a way to determine if a div contains overflowing text and display a "show more" link if it does. While researching, I came across an insightful Stack Overflow answer on checking for overflow in a div. The answer suggests implementing a fu ...
Is there a way to make a sidebar scroll independently of the content it pushes? Currently, my page is structured like this: -------------------------- |[button] Header | -------------------------- |S | Main content | |i | ...
Picture this scenario: you need to share a link for your work, but you want to protect it from being easily copied or developed further by someone else. However, since it's a document, any browser can still view it. Can anyone recommend a tool that wi ...
Is there a way to hide an "h1" element when its parent div reaches the top of the page and then show it again when it moves down using both JQuery and CSS? I attempted to utilize a scroll listener in JQuery to toggle a class, but this resulted in the "h1" ...
Currently in the process of developing a dynamic profit margin calculator for a personal project. Overview Data is retrieved from a database table using SQL and PHP After necessary validations, the data is dynamically displayed as rows in an HTML table ...
I have implemented animateMotion to create an animation along a path. Below is the code snippet that demonstrates this: <!DOCTYPE html> <html> <head> <title>Example Of Many Things!</title> </head> <body> ...
body { background-image: url("https://source.unsplash.com/user/c_v_r/100x100"); background-size: 100px; background-repeat: space; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA- ...
.html <lightning-tabset variant="vertical" > <lightning-tab class="class1" icon-name="utility:adduser" label="demo label1"> demo label1 </lightning-tab> <lightning-tab class=" ...
I am currently developing a map that includes an image overlay with adjustable opacity. Below is the code for this component: import React from 'react' import PropTypes from 'prop-types' import { MapWithGroundOverlay } from './Map ...
I encountered an issue when attempting to hide a PropertyColumn on small screens in Blazor 8 using the regular Bootstrap 5 method. By adding Class="d-sm-none d-md-block" to the QuickGrid component's PropertyColumn, it seems that the Bootstra ...
Trying to incorporate sweetalert2 into my Node.js and Express.js project has not been successful so far. The error message I keep encountering is: swal is not defined ReferenceError: swal is not defined Here are my configurations index.js var express ...
I'm having trouble keeping my background image fitted to the browser when I resize the window. Can someone please assist me with this issue? Here are links to images that illustrate what's happening: View images. The first image shows how it shou ...
Assume we have an example HTML or XML document structured like this: <body> <section> <h1>This should be numbered 1</h1> <section> <h1>This should be numbered 1.1</h1> <p>blah& ...
I am currently working on a Wordpress website where I have a page showcasing 50 different company logos. Below the logo section, there is a form created using Contact Form 7. The logo section was built using a combination of HTML and CSS. Within the form ...
<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark"> <a class="navbar-brand" href="#">Yehee-Lounge</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav ...
Hey, I encountered a strange issue. After clicking on the three pages displayed in the images below: Step 1 controller welcome Step 2 other controllers Step 3, back to step 1 view controller welcome The final image, when returning to controller welcom ...