Html Question posted in
Some basic documentation can be found here.

Html – How do I use the reverse border radius at the top of a card? (CSS)

I’m trying to create a red box (as shown in the picture) that has a notch on the top edge. This notch should have rounded corners with an inverted border radius. Then I wanted to write a word in the notch, with the size of the notch depending on the length of the word. There will also be text on the box later. Everything that is black in the picture should be transparent so that the background can be adjusted later.

IMG

I’ve already tried countless times. But either the background of the notch was not transparent, or the corners were not as rounded as in the picture. Another problem I encountered was that not everything was in a rectangular container, but some elements were outside.

Tags:

2

Answers


  1. 0

    You can use the ::before pseudo element to achieve this. Here is an example:

    div {
  width: 200px;
  text-align:center;
  padding:10px;
  border-radius: 20px;
  background: green;
  font-weight: bold;
  font-family: sans-serif;
  color: white;
  padding-top: 30px;
  position: relative;
}

div::before {
  content: '';
  display: block;
  width: 100px;
  height: 20px;
  background: #FFF;
  position: aboslute;
  border-radius: 20px;
  margin-top: -37px;
  margin-left: calc(50% - 50px);
}
    <div>
  <br />
  Doloribus est architecto laboriosam minus a dolorem labore. Repudiandae natus voluptates tempora dignissimos eos explicabo. Quibusdam fuga et quo impedit excepturi a voluptates optio. Temporibus laborum rem aut illo ea a.
</div>
    Login or Signup to reply.
  2. 0

    I think i got it by using a big div for the whole top notch area (black and red parts) which has a black background.

    In there are 3 divs, a left and right part and the center actual notch area.

    left and right have a red background, the notch area a red one.
    left and right get a border radius on the border to the screen and the border for the inner border-radius and the notch in the notch-area gets a black background and a border radius for the bottom edges.

    This only works with a plain background, not a more complex content. I bet there are some svg and clip path magic one can do but if you only use plain backgrounds and you dont need to display content below the header-area where the notch is this should work.

    Also if we use a flex box for the whole notch-area and use space-between the width of the notch is dynamic

    *{
 --notch-top-radius: 5px;
 --notch-bottom-radius: 10px;
 --screen-radius: 10px;
 --screen-bg: red;
 --notch-bg: black;
}

body{
  margin: 0;
  padding: 0;
  background: var(--notch-bg);
}

.screen{
  background: var(--screen-bg);
  height: calc(100vh - 2rem);
  margin: 1rem;
  width: calc(100vh / 1.61);
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  border-radius: var(--screen-radius);
}

.notch-area{
   background: var(--notch-bg);
   display: flex;
   justify-content: space-between;
   width: 100%;
}

.notch .content{
font-size: 0.5rem;
color: white;
text-align: center;
white-space: nowrap;
padding: 0.1rem;
}

.notch-area .left, .notch-area .right{
  width: 100%;
  height: 1rem;
  background: var(--screen-bg);
}

.notch-area .left{
   border-radius: var(--screen-radius) var(--notch-top-radius) 0 0;
}

.notch-area .right{
   border-radius: var(--notch-top-radius) var(--screen-radius) 0 0;
}

.notch-wrapper{
 background:var(--screen-bg);
  height: 1rem;
}
.notch{
  width: 100%;
  height: 1rem;
  background: var(--notch-bg);
  border-radius: 0 0 var(--notch-bottom-radius) var(--notch-bottom-radius);
}
    <div class="screen">
  <div class="notch-area">
  <div class="left"></div>
  <div class="notch-wrapper">
  <div class="notch">
    <div class="content">Hello World</div>
  </div>
  </div>
  <div class="right"></div>
  </div>
  Doloribus est architecto laboriosam minus a dolorem labore. Repudiandae natus voluptates tempora dignissimos eos explicabo. Quibusdam fuga et quo impedit excepturi a voluptates optio. Temporibus laborum rem aut illo ea a.displayCantLoadMessage
</div>

<div class="screen">
  <div class="notch-area">
  <div class="left"></div>
  <div class="notch-wrapper">
  <div class="notch">
    <div class="content">Hello World With longer text</div>
  </div>
  </div>
  <div class="right"></div>
  </div>
  Doloribus est architecto laboriosam minus a dolorem labore. Repudiandae natus voluptates tempora dignissimos eos explicabo. Quibusdam fuga et quo impedit excepturi a voluptates optio. Temporibus laborum rem aut illo ea a.displayCantLoadMessage
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search