The hidden inner div fades away within the confines of a trapezoid-shaped container

I've been attempting to position a div within another trapezoid-shaped div.
However, the inner div remains invisible no matter what I try.
Z-indexes have also been tested.

.trapezoid
{
    border-color: transparent transparent rgba(255,0,0,0.2) transparent;
    border-width: 0px 10px 38px 10px;
    border-style: solid;
    height: 0;
    width: 40px;
    background-size: 430px;
    overflow: hidden;
    background-repeat: no-repeat;
    display: block;
    text-indent: -99999px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 25px;
    margin-right: 25px;
    cursor: pointer;
}
.innerIcon
{
    width: 100%;
    height: 38px;
    border-radius: 16px;
    background-color: rgba(0,0,0,0.4);
}
<div class="trapezoid" title="Fire Range Down">
    <!-- The inner div is still not visible -->
<div class="innerIcon"></div>
</div>

If anyone has a potential solution, please share it with me.

htmlcss

Answer №1

The trapezoid is constructed using only the border, thus it doesn't have a designated height (specified as height: 0px in css). The issue was caused by overflow:hidden, which has been removed. To resolve this, set position:absolute for the inner div and postion:relative for the trapezoid.

Here is the revised code:

.trapezoid {
  border-color: transparent transparent rgba(255, 0, 0, 0.2) transparent;
  border-width: 0px 10px 38px 10px;
  border-style: solid;
  height: 0;
  width: 40px;
  background-size: 430px;
  /*overflow: hidden;*/
  background-repeat: no-repeat;
  display: block;
  text-indent: -99999px;
  margin-top: 25px;
  margin-bottom: 25px;
  margin-left: 25px;
  margin-right: 25px;
  cursor: pointer;
  /*New Css */
  position: relative;
}

.innerIcon {
  width: 100%;
  height: 38px;
  border-radius: 16px;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0px;
}
<div class="trapezoid" title="Fire Range Down">
  <!-- This inner div is invisible -->
  <div class="innerIcon"></div>
</div>

Answer №2

Check out this CSS snippet

.iconContainer
    {
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 20px;
        background-color: rgba(255,0,0,0.8);
    }

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

JavaScript code that loads a specific DIV element only after the entire webpage has finished loading

How can I ensure that the DIV "image" is loaded only after the entire page has finished loading? What JavaScript code should I use? <div class="row"> <div class="image"> CONTENT </div> </div> I plan to execute the functio ...

javascripthtmlloadloaded

Tips for utilizing the <br> element within a Bootstrap card?

Is there a way to break the line after "Other online payment" without affecting the card content alignment in bootstrap? Adding the <br> tag is causing issues with the alignment. Any thoughts on why this is happening? Thank you :) .user-ads { fo ...

htmlcssbootstrap-4

What is the best way to have an HTML radio button automatically display as selected upon loading if the stored value is "on"?

Utilizing Javascript alongside html: I am facing an issue where a list containing radio buttons is dynamically loaded based on stored data when the page launches. Despite the stored value of the radio being set to "on", the radio button does not show up a ...

javascriptjqueryhtml

Creating multiple div columns dynamically with jQuery

Check out the code snippet below: <div id="container"> <div class="b">test1</div> <div class="b">test2</div> <div class="b">test3</div> <div class="b">test4</div> <div class="b"& ...

javascriptjqueryhtmlcss

Updating a Specific Database Entry in Django Using Multiple Field Values

Hey there, I'm still learning the ropes and haven't had much time to really dive into it yet. My end goal is to create a "check-in/check-out" system by updating a timestamp from NULL to the current time based on employee number and work area. He ...

pythonhtmldjango

In HTML, favoring the use of "//domain.com" over "https://domain.com" or "http://domain.com" is recommended for greater flexibility and compatibility

Related Questions: Changing all links to // Network-Path Reference URI / Scheme relative URLs I have noticed some websites using the following format: background:url(//cdn.domain.com/images/bg-normal.png) They utilize "//", which the browser aut ...

htmlcsshttphttpshyperlink

Incorporate an email sign-up form at the conclusion of the video

I have a challenge of implementing an email sign up form that should be triggered when a video ends. I have managed to display an alert message upon the video ending, but I am unsure how to integrate the form using JavaScript. Can anyone provide some guida ...

javascripthtmlvideohtml5-video

two sections lined up beside each other

Currently, I have two sections positioned on separate lines. Each section consists of multiple lines of text, and I am looking to align them next to each other with a 10px margin between them. Would appreciate any assistance in achieving this setup. Thank ...

htmlcss

Searching for a specific value within a list that has been fetched from a database using AngularJs can be achieved by simply clicking on the search button

Seeking assistance on a search functionality issue. I am able to filter search results from a list retrieved from the database and displayed on an HTML page, but facing difficulty in getting complete search results from the controller. When clicking the se ...

javascripthtmlangularjs

The scripts are mistakenly interpreted as stylesheets, but are actually being transferred with the MIME type text/html

Encountering two console warnings while using Chrome: Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://domain/". domain/:11 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://domain/". ...

javascriptphphtml.htaccessmime-types

Passing image source as a Property in React JS: A Complete Guide

Can you please explain how to send the image source as a property (props) to a child component? ...

javascripthtmlcssreactjs

A section element is covering a div in HTML

Currently facing some layout issues while trying to organize a page using sections. Here's the code snippet I'm working with... https://jsfiddle.net/ytv4zp4b/ <section> <div class="width"> Test Content &l ...

htmlcss

Utilizing an overlay to conceal both the body content and the input fields

I have a website that includes a sliding overlay div which triggers when the user exits a specific area. To showcase this, I created a demonstration on jsfiddle. http://jsfiddle.net/qxcd8y1L/ <body class="overlay"> <input> </body> ...

jqueryhtmlcss

Prevent users from selecting dates in the future using the Bootstrap datepicker

One issue I am facing is how to prevent users from selecting future dates in a form with date input. Here's the solution I came up with: $(document).ready(function(){ $('.month').datepicker({ format: 'yyyy-mm-dd', ...

javascriptjqueryhtmltwitter-bootstrap

Is it possible to generate visually appealing buttons within a form_for helper?

After creating a login form using the form_for helper, I find the button styling to be unattractive. https://i.sstatic.net/PGoGk.png I would like the button style to be similar to this. https://i.sstatic.net/xjt25.png Is there a way to customize the su ...

cssruby-on-railsbuttonsubmitform-for

Is there a way to seamlessly incorporate a PHP tag into a Bootstrap dropdown for perfect alignment?

In relation to this query: I have successfully integrated the if/else statement into the dropdown without any issues. However, upon using the dropdown on the website, I noticed that the item generated by the if/else statement – in this case, "log in" or ...

phphtmlcssbootstrap-4

Assistance with Php: Need help with remote addresses (I'm a complete beginner in php, apologies)

Hello, I have encountered an issue with some PHP code from OpenCart that is automatically inserting <br /> and commas "," into the addresses of all my customers in the order notification emails. This unintended addition is creating problems with the ...

phphtmlopencart

Struggling to identify which css or bootstrap statement is impacting the arrangement of the form layout

I'm facing an issue with setting a border and background color behind a form. When I attempt to do so, the form is aligned to the right and I can't pinpoint which part of my code is causing this misalignment. Here's an example: https://jsfi ...

csstwitter-bootstrapforms

Tips for tracking the number of reservations from individuals who registered via an affiliate link

I am the owner of a hotel booking website. Users are required to sign up before making a reservation. They can sign up either through an affiliate or directly on the booking site. Affiliates share signup URLs on their websites, which redirect users to the ...

phphtmlsql

Customizing individual textareas in tinyMCE can easily be done by adjusting the

This resource provides instructions on customizing features like the menubar and status bar for all form fields within tinyMCE: tinymce.init({ selector: "textarea", menubar:false, statusbar: false, .. }); I am wondering how to achieve th ...

javascriptjqueryhtmlcsstinymce