Unexpected display issues with CSS shapes in Bootstrap framework

Been experimenting with creating custom shapes in Bootstrap - they display correctly in HTML and CSS, but Bootstrap distorts them. It seems like there are no conflicting classes. Could it be necessary to use '!important' on some of the elements?

 <div class="pot-top"></div>
 <div class="pot-top-shadow"></div>
 <div class="pot-bot"></div>


.pot-top{
            width: 100px;
            height: 20px;
            background-color: #FF7043;
            top: 200px;
            left: 300px;
            position: absolute;
        }
        .pot-bot{
            width: 50px;
            height: 0px;
            position: absolute;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 50px solid #FF7043 ;
            top: 220px;
            left: 310px;
            z-index: 5;

        }
        .pot-top-shadow{
            width: 72px;
            height: 0px;
            position: absolute;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 10px solid #F4511E ;
            top: 220px;
            left: 310px;
            z-index: 10;

        }
cssbootstrap-5

Answer №1

The issue seems to be related to how bootstrap handles box-sizing with border-box. By disabling the reboot.scss before/after pseudo classes for box-sizing in the inspect menu, the problem seems to be resolved. Unfortunately, I lack the expertise to explain the technical details behind this, and it may require someone with more CSS knowledge to do so.

One way I addressed this issue was by adjusting the width of the elements to account for the sum of the left and right borders.

.pot-bot{
    width: 80px;
    height: 0px;
    position: absolute;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 50px solid #FF7043 ;
    top: 220px;
    left: 310px;
    z-index: 5;
}
.pot-top-shadow{
    width: 82px;
    height: 0px;
    position: absolute;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #F4511E ;
    top: 220px;
    left: 310px;
    z-index: 10;
}

An alternative solution could involve using CSS clip-path (although adjustments may be needed for desired appearance). Interestingly, even with clip-path, I still had to increase the width of the divs to match the intended design. Here is the path generator tool that I utilized: This.

.pot-bot{
    width: 80px;
    height: 50px;
    position: absolute;
    background-color: #FF7043;
    clip-path: polygon(20% 100%, 80% 100%, 100% 0, 0 0);
    top: 220px;
    left: 310px;
    z-index: 5;
}
.pot-top-shadow{
    width: 82px;
    height: 10px;
    position: absolute;
    background-color: #F4511E;
    clip-path: polygon(5% 100%, 95% 100%, 100% 0, 0 0);
    top: 220px;
    left: 310px;
    z-index: 10;
}

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

Animate the transition effect as soon as the block is displayed

Looking to create a smooth page transition using CSS changes with the help of Javascript (jQuery). Initially, one of the pages is set to display none. page1 = $('.page1'); page2 = $('.page2'); page1.removeClass('animate').cs ...

javascriptjquerycssanimation

Show a background picture while hovering on the main image

Is there a way to make the background image appear when hovering over the original image and disappear when no longer hovering? Below is a snippet of my HTML and CSS. Is there a straightforward CSS command to hide the original image or show the background ...

htmlcss

Dependencies in Scala.js for CSS styling

I am currently having an issue implementing Scala.js with the bootstrap library. Including the js file was a simple and straightforward process: jsDependencies +="org.webjars" % "bootstrap" % "3.3.7-1" / "bootstrap.js" minified "bootstrap.min.js" However ...

javascriptcsstwitter-bootstrapscala.js

Refresh a function following modifications to an array (such as exchanging values)

Looking to re-render a function after swapping array values, but the useEffect hook is not triggering it. I need assistance with this as I plan to integrate this code into my main project. Below are the JSX and CSS files attached. In App.js, I am creating ...

javascriptcssreactjsreact-hooks

A user-friendly JavaScript framework focused on manipulating the DOM using a module approach and aiming to mirror the ease of use found in jQuery

This is simply a training exercise. I have created a script for solving this using the resource (function(window) { function smp(selector) { return new smpObj(selector); } function smpObj(selector) { this.length = 0; i ...

javascripthtmlcssdomframeworks

Tips for altering the appearance of the material-ui slider thumb design when it is in a disabled state

Through the use of withStyles, I have successfully customized the style of the Slider: const CustomSlider = withStyles(theme => ({ disabled: { color: theme.palette.primary.main }, thumb: { height: 24, width: 24, }, }))(Slider); How ...

javascripthtmlcssreactjsmaterial-ui

Mobile Exclusive Bootstrap 5 Collapse Feature

Trying to implement the default collapse feature in Bootstrap 5x specifically for mobile devices. Despite setting up a CSS media query as per my research, the .collapse function doesn't seem to work as intended? The goal is to have the collapsed DIV ...

csstwitter-bootstrapbootstrap-5

Looking to adjust the width of a Bootstrap dropdown menu?

I am trying to adjust the width of my dropdown menu Here is a link to jsfiddle with my code: [jsfiddler][1]. On the right side of the main menu, I have a languages dropdown menu. When it expands, its width is very large and I want it to match the main m ...

jqueryhtmlcsstwitter-bootstrapdrop-down-menu

Empty HTML elements

Is there a way to create empty HTML tags, meaning tags that have no predefined styling or effect on the enclosed content or its environment? For example, <p> creates a paragraph, <b> makes text bold, and <div> forms a container. I am in ...

htmlcsstags

Photo positioned on top of the form with Bootstrap 5

I am working on creating a responsive webpage using Bootstrap, where I need to display a large image above a form. To manage the size of the image, I have placed it inside a "peek-view" container which allows scrolling both horizontally and vertically to v ...

htmlcssbootstrap-5

Modify the table layout by incorporating images within separate div containers for each row

In my layout, there is a grey box element that contains a table with rows of small images. I want the table to automatically adjust based on the number of images so that when the grey box reaches its maximum size, the images move to the next row. Is this a ...

htmlcsshtml-tablegrid-layout

Is there a way to switch between showing and hiding all images rather than just hiding them one by one?

Is there a way I can modify my code to create a button that toggles between hiding and showing all images (under the user_upload class), instead of just hiding them? function hidei(id) { $('.user_upload').toggle(); Any suggestions would be grea ...

javascriptjqueryhtmlcsshide

What is the process for implementing a third-party component in my web application?

After some experimentation, I've discovered that it's necessary to include the link to the css files in the header and then mention the link to the js files before the closing tag. However, I encountered difficulties when trying to use a compone ...

javascripthtmlcsssemantic-uicustom-component

What is the best way to set up unique body backgrounds for each page in WordPress?

My website consists of various pages named as : page-X.php page-Y.php page-Z.php These three pages mentioned above require unique background colors. However, the remaining pages/posts on my site inherit their background-color from the style.css file. ...

htmlcsswordpresswordpress-theming

Customizing Each Menu Item in WordPress

I am currently working on customizing my WordPress Menu. My goal is to assign a unique color to each menu item, while ensuring that the background color of child elements within pages and posts matches the parent text color. Specifically, I envision the f ...

csswordpressmenu

The page switch with a jittery effect

Could really use some assistance with this code that has been giving me trouble for quite a while now. It's a simple HTML, CSS, and JS code involving two pages. [The second page overlaps the first by default, but adjusting the z-index of the first p ...

javascripthtmlcss

Is there a way to create a fixed container aligned to the right and have the parent container handle scrolling?

My setup is as follows: Full width, 100px height header The header is always visible at the top. Full width, remaining height details The content of details can scroll vertically and horizontally. A fixed 200px width, full height container is right- ...

htmlcss

How to center a span using Twitter Bootstrap

As a newcomer to Twitter Bootstrap, I'm wondering how I can center a span within a parent row. Currently, I am working with Twitter Bootstrap Version 2.3 instead of 3.1. In version 3.1, there is a center-block feature that I cannot utilize in 2.3. Th ...

csstwitter-bootstrapresponsive-designcss-frameworks

JavaScript code to generate a random color for the box shadow effect

Recently, I developed a function that generates random divs containing circles. The function randomly selects a border color for each circle, and this feature is functioning correctly. To enhance the appearance, I decided to add a box shadow to the circl ...

javascripthtmlcss

Which HTML element does each script correspond to?

Are there any methods to identify the script used in certain HTML elements? For instance, if I wish to determine the script responsible for creating a drop-down menu, I can locate the HTML and CSS for the menu but not the JavaScript (or other scripts). I ...

javascriptjqueryhtmlcss