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

Tips for keeping the hover effect of a sibling element in Material-UI

Card Component import image from "../../Assets/pic.jpg"; import React, { useState } from "react"; import { makeStyles } from "@material-ui/core/styles"; import Card from "@material-ui/core/Card"; import CardActionAre ...

javascriptcssreactjsmaterial-uiinline-styles

Is it possible to use jQuery/JS to automatically format currency input as it is typed, adding a 1000 separator and ensuring

I'm working on a text input field that needs to format the value as it is being typed, with restrictions of 2 decimal places and 1000 separators. This field should only allow for digits to be entered. Specifically, this input is meant for users to ent ...

javascriptjqueryhtml

Utilizing JavaScript to dynamically alter an image based on selected dropdown option

I am currently facing an issue with my code where the selected image is not changing when I choose an option from the dropdown list. There are a total of 5 images, but for some reason, they are not displaying correctly. Here is the snippet of my code; < ...

javascripthtml

When you hover over the button, it seamlessly transitions to a

Previously, my button component was styled like this and it functioned properly: <Button component={Link} to={link} style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', height: 48, padding: '0 ...

javascriptcssreactjstypescriptmaterial-ui

Displaying information in a drop-down list based on the selection made in a previous drop

Hey fellow developers, I could really use your expertise on a project I'm working on for attendance management. I've hit a roadblock with a specific feature - my goal is to dynamically display departments based on the selected block without requi ...

phpjquerycssajaxhtml

css Repaint the CSS by filtering out list items with odd indexes

Having a list of over 20 items, I utilized the :nth-child(2n+1) selector to alternate the background color (even item in black, odd item in white). However, when using the jQuery Isotope plugin to filter out specific items by adding a .isotope-hidden class ...

jquerycssfiltercss-selectorsjquery-isotope

Modify the div's background color specifically with AngularJS

After creating a list using divs, my goal is to modify only the background color of the selected div when a user makes a choice from the list. I have accomplished this by defining two distinct CSS classes with the main difference being the background colo ...

htmlcssangularjs

What could be causing the second image to not drop in the proper position in an HTML and JavaScript environment?

I am encountering an issue with a simple drag and drop implementation using images in my code. The first image works fine, but for some reason the second image does not display correctly when dragged inside the div boxes; it appears outside of the box. Can ...

javascripthtml

Is there a way to prevent tags from wrapping and showcase them all in a single line when utilizing the jQuery select2 plugin?

I have a requirement to prevent tags from wrapping and instead display them in a single line using the jQuery TagIt plugin. Check out my preview: https://i.stack.imgur.com/lYhsi.png My goal is to have all the tags displayed on a single line without wra ...

javascripthtmljquerycssjquery-select2

Tips for creating a fixed footer that adjusts with a flexible wrapper

Feeling incredibly stressed, I embarked on a quest to find the perfect sticky footer. After searching Google for what seemed like an eternity, I came across multiple tutorials recommending the use of min-height:100%. However, this approach caused the wrap ...

javascriptjquerycsssticky-footer

Styling with CSS Variables and Transforming Elements

After conducting thorough research both on this platform and via Google, I have yet to find a solution to my query: "how can CSS variables be utilized in a CSS transform?" Within the HTML header, three CSS variables and their fallback values are declared: ...

javascripthtmlcss

Modal - sending data through URL

I am trying to create a modal that will open another view using a URL in script, but instead it just opens a blank pop-up and doesn't redirect to the URL. I have attempted various approaches, but none seem to be working. Adding <div class="modal-b ...

jqueryhtmlmodel-view-controllermodal-dialog

The scroll feature in JavaScript is malfunctioning

After countless hours of troubleshooting, I still can't figure out why the code snippet below is not working properly on my website at : <script> $(window).scroll(function () { if ($(window).scrollTop() > 400) { ...

javascriptjquerycssscroll

How can we automate the process of assigning the hash(#) in Angular?

Is it possible to automatically assign a unique hash(#) to elements inside an ngFor loop? <div *ngFor="let item of itemsArray; index as i"> <h3 #[item][i]> {{ item }} </h3> </div> I would like the outp ...

javascripthtmlangularangularjstypescript

Loading images in advance with AJAX for enhanced AJAX performance

My website is structured in a sequential manner, where page1.html leads to page2.html and so on. I am looking to preload some images from the third page onto the second page. After searching, I came across this amazing code snippet: $.ajax({ url ...

javascriptjqueryhtmlcssajax

Learn how to customize button styles in ExtJS with the pressedCls configuration option

Is there a way to change the color when a button is pressed? I tried using the pressedCls config but it didn't work. How can I fix this issue or is there another method to set the CSS when a button is pressed? Thank you so much! Javascript: Ext.crea ...

javascriptcssextjs

Paste a data point from an Excel spreadsheet into a JavaScript script

I'm encountering a major challenge. Currently, I am creating a login process for a client and here is the approach I have taken: function Jump(pal){ if (pal=='10528'){window.open('http://www.google.es','_parent')} Subs ...

javascripthtmlexcel

Revamping the hyperlinks in my collapsible menu extension

Is there a way to modify the links in this accordion drop menu so that they lead to external HTML pages instead of specific areas on the same page? I've tried various methods but can't seem to achieve it without affecting the styles. Currently, i ...

javascriptjqueryhtmlcss

Adjust the background image color with CSS styling

I have a collection of icons that I would like to incorporate into my application. These icons primarily consist of glyphicons with a few others mixed in. I want the HTML structure to mimic that of a glyphicon, specifically: <a href="#"> <spa ...

htmlcss

Adding code containing various Google Maps elements in a fresh browser window using JavaScript

I've encountered an issue while trying to create a new page with a Google map and title based on the button clicked. Interestingly, when I copy/paste the HTML in the "newhtml" variable into an actual HTML file, it works perfectly fine. However, it doe ...

javascriptjqueryhtmlcssgoogle-maps