Creating CSS rounded corners with pseudo-elements

Take a look at this fiddle: https://jsfiddle.net/xnr7tqm1/

This is the html code I'm working with:

    <div class="media-container">
        <iframe width="365" height="200" src="https://www.youtube.com/embed/JqjIb6FhU_k" frameborder="0" allowfullscreen></iframe>
    </div>

and here is the css for it:

.media-container {
    position: fixed;
    right: 28px;
    bottom: 77px;
    width: 340px;
    height: 200px;
    border-radius: 7px 7px 0 0;
    overflow: hidden;
    text-align: center;
    iframe {
        margin-left: -16px;
    }
}

.media-container:after, .media-container:before {
    bottom: 0%;
    left: 0%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 164px;
    position: absolute;
    pointer-events: none;
}

.media-container:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 16px;
    margin-left: -16px;
}

.media-container:before {
    border-color: rgba(245, 41, 34, 0);
    border-bottom-color: #fff;
    border-width: 16px;
    margin-left: 175px;
}

I want to round the corners at the bottom of the video just like at the top. However, using a pseudo element to draw the arrow at the bottom makes it difficult to round the bottom corners in this setup.

Does anyone have a solution for this issue?

Thank you!

htmlcss

Answer №1

Utilizing an additional element and employing box-shadows, you have the ability to craft an "inverse border" that mirrors the background color, effectively concealing your video content. Take a look at the ".bottom-borders" element provided below:

.media-container {
    position: relative;
    width: 340px;
    height: 200px;
    border-radius: 7px 7px 0 0;
    overflow: hidden;
    text-align: center;
}
iframe {
    margin-left: -16px;
}
.media-container:after, .media-container:before {
    bottom: 0%;
    left: 0%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 164px;
    position: absolute;
    pointer-events: none;
}
.media-container:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 16px;
    margin-left: -16px;
}
.media-container:before {
    border-color: rgba(245, 41, 34, 0);
    border-bottom-color: #fff;
    border-width: 16px;
    margin-left: 175px;
}
.bottom-borders {
    height: 7px;
    position: absolute;
    bottom: 16px;
    width: 100%;
}
.bottom-borders:before,
.bottom-borders:after {
    content: "";
    position: absolute;
    top: 0;
    width: 7px;
    height: 7px;
}
.bottom-borders:before {
    left: 0;
    border-bottom-left-radius: 7px;
    box-shadow: -3.5px 3.5px 0 3.5px white;
}
.bottom-borders:after {
    right: 0;
    border-bottom-right-radius: 7px;
    box-shadow: 3.5px 3.5px 0 3.5px white;
}
<div class="media-container">
    <iframe width="365" height="200" src="https://www.youtube.com/embed/JqjIb6FhU_k" frameborder="0" allowfullscreen></iframe>
    <div class="bottom-borders"></div>
</div>

Answer №2

I prefer using shadows for one pseudoelement and gradients for the other - it keeps things clean without requiring extra elements. Check out this fiddle for a live example: https://jsfiddle.net/gb8h983r/1/

.media-container {
    position: relative;
    width: 340px;
    height: 200px;
    overflow: hidden;
    border-radius: 7px 7px 0 0;
}

.media-container iframe {
    width: 110%;
    height: 110%;
    margin-left: -5%;
}

.media-container:after, .media-container:before {
    content: "";
    position: absolute;
    pointer-events: none;
}

.media-container:after {
    right: 0;
    left: 0;
    bottom: 16px;
    height: 14px;

    border-radius: 7px;
    box-shadow: -333px 7px #ffffff, 333px 7px #ffffff;
    /* 333px = 340px -7px */
}

.media-container:before {
    right: 0;
    bottom: 0;
    left: 0;
    height: 16px;

    background:
        linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 49.99%, rgba(255,255,255,0) 50%, rgba(255,0,0,0) 100%) -8px 100%,
        linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49.99%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%) 8px 100%;
    /* 8px = 16px / 2 */
    background-repeat: no-repeat;
}

Answer №3

I propose a solution to mask your video using an image overlay, like so:

img {
    width: 340px;
    height: 200px;
    position: absolute;
    z-index: 2;
    /*right: 28px;
bottom: 77px;*/
}

.media-container {
    position: fixed;
    z-index: 1;
    right: 28px;
    bottom: 77px;
    width: 340px;
    height: 200px;
    overflow: hidden;
    text-align: center;
}
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg">
<div class="media-container">
    <iframe width="365" height="200" src="https://www.youtube.com/embed/JqjIb6FhU_k" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
    <div>

In this scenario, the image should be a PNG specifically designed to cover the video with 0 opacity.

Answer №4

Here's a different approach:

<div class="container">
<div class="video-wrapper">
        <iframe width="340" height="200" src="https://www.youtube.com/embed/JqjIb6FhU_k" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Styles:

.container{
    position: relative;
      right: 28px;
    bottom: 77px;
    width: 340px;
    height: 200px;
}
.video-wrapper {
    position: absolute;
    border-radius: 7px;
    text-align: center;
    background: #ddd;
    width:340px;
}

.video-wrapper:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #ddd;
    border-width: 30px;
    margin-left: -30px;
}

Check out the JSFiddle. Want to try another useful tool? Look at this one!

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

Is it possible to change cases within a switch statement after one case condition has been satisfied?

I am currently working on implementing a game that involves rolling dice in Javascript/jQuery. The game has different "Phases" that the player must complete one by one without any interference from previous phases. The goal is to smoothly transition betw ...

javascriptjqueryhtml

Having an issue with a cropped CSS box?

I have created a CSS box with a red background color, but for some reason the bottom left corner is being cut off. Can you provide an explanation for this issue? (Refer to the image below) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

jquerycss

Determine the count of checkboxes on a webpage by identifying the presence of the keyword 'type' in the page source code, utilizing Selenium with Python

Here is a code snippet to find the number of checkboxes on the current webpage: checkboxes = driver.find_elements(By.XPATH("html/body/div[2]/div/section[8]/div/div/div[3]/div/div[2]/table/tbody/tr[1]/td[1]/input[@type='checkbox']")) However, wh ...

pythonhtmlpython-3.xseleniumselenium-webdriver

The update of the attribute in jQuery on a checkbox is not causing the change event to trigger

I am working on a feature where there are multiple checkboxes along with a status box that indicates if at least one of the checkboxes is checked. Additionally, I have included a Check All/None checkbox that can toggle all the checkboxes. However, althoug ...

jqueryhtmlcheckbox

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

I am encountering an issue with dynamically loading stylesheets via JavaScript into my application. Within these stylesheets, I have various CSS variables that I need to access and modify from my JavaScript code. When the stylesheets are directly embedded ...

javascripthtmlcsscss-variables

I am encountering issues with the responsiveness of my layout as it is

My goal is to create a responsive layout utilizing code and examples from this website: www.responsivegridsystem.com To achieve this, I have nested a few containers to ensure a content area of 960px width centered within a 1000px container. My plan is th ...

htmlcssresponsive-design

Choosing an element within a table following a different element using Selenium

On a webpage, a table displays various plain text elements (filenames) on the left side and hyperlinks to PDF files on the right: Red report Download PDF Blue report Download PDF Green report Download PDF These pages have multiple entries, and t ...

htmlselenium

Python Selenium: Strategies for Iteratively Waiting for a Clickable Element

My task involves downloading images from website pages using Python Selenium. I need to select the web elements of these images and click on them one by one: ... THUMBNAILS = browser.find_elements_by_xpath("//div[contains(@class, 'lg-thumb-item&a ...

pythonhtmlseleniumwebdriverwait

Adjust the background color of JQuery UI modal dialog overlay in real-time

How can I dynamically change the background color of a page when a modal dialog loads, specifically targeting only one specific modal dialog? Setting the background color with CSS works fine: .ui-widget-overlay { background-color: white; } Here's ...

jquerycssjquery-uimodal-dialog

Adaptable Collection of 4 Images

I am facing a challenge in replicating eBay's 'Today' featured seller layout with 4 square images creating one box (refer to the image). I am using Bootstrap for this task, and I am finding it difficult to comprehend how to achieve this. I h ...

javascripthtmlcsstwitter-bootstrap-3stylus

What distinguishes between using ul#test and #test ul in CSS?

Could someone help clarify the distinction between these two types of CSS declarations: ul#test { } #test ul { } Despite my searching, I am unable to pinpoint the difference, but they exhibit different behaviors when implemented on a test page. To me, i ...

csscss-selectors

Exploring techniques for creating realistic dimensions in CSS

My goal is to create a responsive website that accurately displays an object with specified dimensions, such as a width of 100mm, regardless of the user's screen resolution. However, I am facing challenges in achieving this consistency across all devi ...

javascripthtmlcssunits-of-measurementppi

The lower division remains static when the browser window is resized

Why does the div with class .lower not move to the bottom of the page when the screen is resized? Could this be because of its CSS property position:absolute;? Check out the code snippet here. #lower { width: 100%; position: absolute; bot ...

htmlcss

Is it necessary to capitalize the first letter only when it's not at the beginning of a sentence?

To separate a lengthy string, I followed the approach outlined in this post: .line { display: inline-block; } <p> <span class="line">This text should break</span> <span class="line">after the word "break"</span> </ ...

htmlcss

Integrating a fresh element into the carousel structure will automatically generate a new row within Angular

I'm currently working on an Angular4 application that features a carousel displaying products, their names, and prices. At the moment, there are 6 products organized into two rows of 3 each. The carousel includes buttons to navigate left or right to d ...

javascripthtmlcssangularbootstrap-4

Adjust SVG size to fit parent container/division

I am trying to make the SVG completely fill the containing TD. I don't care about preserving the proportions of the SVG. Instead, I want the height of the SVG to be the same as its width when the height should be larger than the width. There is paddin ...

htmlcsssvg

Tips for combining text and variable outcomes in printing

I created a calculator that is functioning correctly and displaying results. However, I would like to include a text along with the results. For example: You spent "variable result" dollars in the transaction. Currently, the results are shown only after ...

javascripthtml

Struggling to make changes to a Styled Component in a React application

In a certain file, I have a BaseComponent composed of various other components and being exported. The top level of the BaseComponent contains a wrapper responsible for managing margins. When I export it and attempt to override some styles with: //other fi ...

javascriptcssreactjsstyled-components

What is the best way to make my page headers resize with a responsive layout?

Currently, I am working on a website that needs to be fully functional on both mobile devices and computers. I have successfully implemented Bootstrap-responsive to make many elements work, but now I am focusing on the hero-unit for the homepage. Specifica ...

csstwitter-bootstrap

The vertical menu was added, but the text did not align properly

I pasted a sidebar from a different source https://i.stack.imgur.com/jkYWz.png My goal is to have the text appear at the top of the page, similar to this example https://i.stack.imgur.com/1aR5s.png After adding this line, my text is displaying at the b ...

css