Is it possible to achieve this using CSS?
This is the current progress I've made:
div {
-webkit-clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%);
clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%);
background:red;
height:300px;
width:500px;
border-radius: 25x;
}
A creative approach using a skew transformation:
.box {
--r: 20px; /* defines the radius */
width: 300px;
height: 50px;
border-top-left-radius: var(--r);
position: relative;
overflow: hidden;
}
.box::before,
.box::after {
content:"";
position: absolute;
background: red;
transform: skew(40deg); /* adjust to change inclination */
transform-origin: bottom right;
}
.box::before {
inset: 0 var(--r) 0 0;
border-top-right-radius: var(--r);
}
.box::after {
right: .8px;
bottom: 0;
width: var(--r);
aspect-ratio: 1;
-webkit-mask: radial-gradient(100% 102% at 100% 0,#0000 97%,#000);
}<div class=box></div>Here's an alternative approach using the skew property without utilizing a mask:
(test it out on codepen.io)
body {
/** Experiment with these **/
--border-radius: 60px;
--height: 50px;
--width: 200px;
/* Specify explicit units, such as 0px */
--padding-tb: 2em;
--padding-rl: 2em;
--background: #ffe600;
--skew-angle: 45deg;
--margin: 2em 5em;
/** ...but don't alter these **/
--real-border-radius: min(
calc(var(--height) / 2 + var(--padding-tb)),
var(--border-radius)
);
--real-height: calc(
var(--height) +
var(--padding-tb) * 2
);
--stop: calc(
(var(--real-height) / 2) /
tan(90deg - var(--skew-angle)) +
var(--real-border-radius)
);
--real-width: calc(
var(--width) +
var(--stop) * 2 +
var(--padding-rl) * 2
);
--before-width: calc(
var(--real-width) -
var(--stop) * 2
);
--after-left: calc(
var(--stop) +
var(--before-width)
);
}
.rounded-trapezoid {
position: relative;
box-sizing: border-box;
margin: var(--margin);
border-radius: var(--real-border-radius) var(--real-border-radius) 0 0;
height: var(--real-height);
width: var(--real-width);
overflow: hidden;
background:
linear-gradient(
to bottom,
transparent 50%,
var(--background) 50%
),
linear-gradient(
calc(90deg - var(--skew-angle)),
var(--background) calc(
var(--stop) +
var(--before-width) / 2
),
#fff var(--real-border-radius)
);
padding: var(--padding-tb) var(--padding-rl);
transition: all 0.5s;
&::before, &::after {
content: '';
position: absolute;
top: 0;
height: 100%;
transform: skewX(var(--skew-angle));
transition: all 0.5s;
}
&::before {
left: var(--stop);
border-radius: var(--real-border-radius) var(--real-border-radius) 0 0;
width: var(--before-width);
background: var(--background);
}
&::after {
left: var(--after-left);
border-radius: 0 0 0 var(--real-border-radius);
width: calc(var(--stop) * 2);
background: #fff;
}
&::before, &::after {
visibility: hidden;
}
}
#outline:checked ~ .rounded-trapezoid {
outline: 1px solid black;
&::before {
outline: 1px solid red;
}
&::after {
outline: 1px solid green;
}
}
#visibility:checked ~ .rounded-trapezoid {
&::before, &::after {
visibility: visible;
}
}<label for="outline">Outline:</label>
<input type="checkbox" id="outline">
<br>
<label for="visibility">Pseudo-elements' visibility:</label>
<input type="checkbox" id="visibility" checked>
<div class="rounded-trapezoid"></div>Is there a new method to set the height of the "v-select" component in Vuetify version 3? In previous versions, the 'height' prop was used in this way: <v-select :items="..." height="30" /> However, this prop has been ...
Can anyone guide me to a website template that resembles the design of Office 2007? I'm hoping to find one that has similar colors, hover effects, and overall aesthetic. ...
I have a dropdown feature on my bootstrap second textbox with a lot of content. The issue is that the dropdown overflows and leaks into the textbox located on the left below it. How can I resize it properly to fit within the confines of the drooping textbo ...
I recently integrated SweetAlert2's toast notifications into my web application and customized the animation using the customClass parameter to have the notification slide in from the right side. However, there are a couple of things I'm struggli ...
Twice I have inserted the font Acumin Pro Condensed, once with a weight of 400 and again with a weight of 700. I attempted to use both weights separately; assigning the 400 weight to an h3 tag and the 700 weight to an h2 tag. However, only the 700 font we ...
This is the given HTML code structure (view in JS Fiddle) How can I adjust the background color to be 20% opaque white while keeping the text black? It needs to be compatible with IE7. <ul class="menu"> <li class="first expanded active-trail ...
Hi there! I am currently learning the basics of HTML and CSS. I have a question regarding creating a header with no margins on the edges. Any advice would be greatly appreciated as I haven't been able to find a clear solution. Below is my code snippet ...
I'm in the process of developing a sleek SPA with the help of bootstrap 4.x. Below is the HTML code I've put together: <!DOCTYPE HTML> <html> <head> <!-- Required meta tags --> <meta charset="utf-8"&g ...
Looking to add a PNG image to a menu, similar to the one showcased below: https://i.sstatic.net/YOXpM.jpg My current approach involves using position: absolute and z-index, but I'm encountering issues when the menu ends up behind the PNG image. Is t ...
Check out this image I made showcasing a board with an elongated shadow cast behind it. The intention is to emulate the look of the board leaning against a wall, resulting in a triangular shadow on either side. I'm curious if it's achievable to ...
https://i.sstatic.net/UrB5f.jpg Is there a way to align the 3 input fields so that their right edges are all vertical? I still want the text+Input to be centered within the column but aligned vertically... Using Bootstrap 3.3.7 HTML: <link href="h ...
Hello Overflowers, I've designed an HTML page with the following specifications: 1. Resetting HTML, BODY, DIVs, and SPANs to have no border, padding, margin, or outline 2. Setting display properties for HTML, BODY, and DIV elements 3. Defining hei ...
I need assistance with creating a button that has a large image as its background. The challenge I'm facing is that the image fits vertically within the button, but horizontally it repeats unless I use 'no-repeat', which leaves empty space i ...
Is there a way to dynamically increment my CSS ID using PHP? foreach ($query_cat->result() as $row_cat) { $row_cat_id = $row_cat->id; echo '<div class="product-wrapper">'; echo '<div id="product-header' . $r ...
I'm having trouble getting a scrollbar on my div element when the content is too wide. Instead, the scrollbar always appears on the window itself. I have tried adjusting the overflow settings but can't seem to find the right solution. jsFiddle ...
After spending countless hours trying to solve this problem, I'm hoping that my question isn't too foolish. This is a continuation of a previous question about creating a style tag with JavaScript on Stack Overflow. The solutions provided by Tom ...
I'm new to webpack and I need help with reading a specific value, which is the env variable from the webpack.config.js file, in a sass file. This will allow me to have different CSS styles based on the environment. For example: If the env is set to ...
I've been attempting to recreate the functionality of this codepen, and I've encountered an issue with the vw declaration in Chrome. Despite setting GalleryGrid to 100vw, it doesn't display correctly in Chrome, while Firefox and Safari work ...
Looking to design a background with a repeating image using CSS. background: url(../images/bg.PNG) repeat; However, facing an issue where the images are too close together. Any suggestions on how to add padding around each image? ...
I've implemented a button using React Native Elements in my layout. Here's the code snippet: <Button title="Login" buttonStyle={{ backgroundColor: Colour.green }} containerStyle={{ ...