CSS card with border and a cut-out in the top-right corner

Question

CSS card with border and a cut-out in the top-right corner

Looking to create a div with a gray border that is 20px thick all around. I also want a cut out in the top right corner of the div, with the rest of the borders matching the thickness. The cut out should be transparent.

Here is my attempt:

http://jsfiddle.net/tybourque/2bZAW/5959/

.card-cutout:before {
    content: '';
    position: absolute;
    top: -20px;
    right: -80px;
    border-top: 80px solid transparent;
    border-left: 80px solid #828282;
    width: 0;
    z-index: 10;
}
.card-cutout:after {
    content: '';
    position: absolute;
    top: 0px;
    right: -62px;
    border-top: 65px solid transparent;
    border-left: 62px solid white;
    width: 0;
    z-index: 11;
}

Any suggestions on an easier way to achieve this look? https://i.sstatic.net/doz1u.png

html css

Answer 1

Answer №1

To achieve this effect, you can utilize a :before pseudo-element along with gradient styles:

body {
  background-color: #f5f5f5;
}

section {
  background-color: #fff;
  border: 10px solid #ccc;
  height: 200px;
  margin: 20px auto;
  position: relative;
  width: 80%;
}

section:before {
  background: linear-gradient(135deg, #fff 40%, #ccc 40%, #ccc 60%, #f5f5f5 61%);
  content: "";
  display: block;
  height: 100px;
  position: absolute;
  right: -10px;
  top: -10px;
  width: 100px;
}

<section></section>

Answer 2

To achieve this effect, you can utilize a :before pseudo-element along with gradient styles:

body {
  background-color: #f5f5f5;
}

section {
  background-color: #fff;
  border: 10px solid #ccc;
  height: 200px;
  margin: 20px auto;
  position: relative;
  width: 80%;
}

section:before {
  background: linear-gradient(135deg, #fff 40%, #ccc 40%, #ccc 60%, #f5f5f5 61%);
  content: "";
  display: block;
  height: 100px;
  position: absolute;
  right: -10px;
  top: -10px;
  width: 100px;
}

<section></section>

CSS card with border and a cut-out in the top-right corner

Answer №1

Similar questions

Emails are failing to send when information is entered, instead sending a blank email when the page is

What is the best way to align text and images for list items on the same line?

Leveraging the browser's built-in validation error messages in Angular for HTML forms

Leveraging reframe.js to enhance the functionality of HTML5 video playback

How to retrieve the value of a selected item in primeng using p-dropdown and angular

Tips for creating proper spacing between text and adjacent boxes in CSS/HTML

Using a carousel component in Bootstrap

What is the method to adjust line spacing of hyperlinks in JavaFX?

Utilize CSS in your HTML using Express framework

Python and Selenium are a powerful combination, but sometimes you may encounter the error message "Element cannot be clicked at point (x,y)

Guide to populating a dropdown list using an array in TypeScript

Update the value of an ASP textbox using JQuery, and ensure that the .Text property accurately reflects the new value

Implement jQuery plugin selectively in AngularJS on particular pages

Display input field in AngularJS when radio button is selected

What is the best way to constrain the ratio of a full-width image display?

Section CSS for Full Page Styling

Restore checkbox to default setting

Employing Selenium for extracting the id_str element

Is there a light font that cannot be replicated?

Navigation bar with a full-page slider