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

Html – Create shaped div

I want to create a div with this shape using html css: shaped div I created something like below but its border not look like the photo above. Can someone help me?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .card{
    background-color: rgb(237, 241, 244);
    position: relative;
    border-radius: 12px;
    width: 300px;
    height: 450px;
  }
  .header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: 38px;
    border-radius: 8px;
    height: 20px;
    width: 100px;
    background-color: white;
  }
</style>
<body>
  <div class="card">
    <div class="header"></div>

  </div>
</body>
</html>
Tags:

2

Answers


  1. 0

    You can get the desired effect with additional rounded divs left and right of the tab title and by selectively rounding corners:

    .card {
  --bg-color: rgb(237, 241, 244);
  --card-corner: 20px;
  --tab-corner: 12px;
  width: 300px;
  height: 450px;
  display: flex;
  flex-direction: column;
}
.header {
  flex: none;
  height: 20px;
  font: 12px sans-serif;
  background-color: white;
  border-radius: var(--card-corner) var(--card-corner) 0 0;
  contain: strict; /* cut upper corners */
  display: flex;
  justify-content: stretch;
}
.content {
  flex: auto;
  background-color: var(--bg-color);
  border-radius: 0 0 var(--card-corner) var(--card-corner);
  contain: strict; /* cut lower corners */
  padding: 10px;
}

.header::before,
.header::after {
  content: '';
  background-color: var(--bg-color);
}
.header::before {
  flex: auto;
  border-top-right-radius: var(--tab-corner);
}
.header::after {
  flex: 0 0 38px;
  border-top-left-radius: var(--tab-corner);
}
.header > .label::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: white;
  border-radius: 0 0 var(--tab-corner) var(--tab-corner);
  z-index: -1; /* behind label text */
}
.header > .label {
  position: relative;
  flex: none;
  background-color: var(--bg-color);
  isolation: isolate; /* create z-stacking context */
  padding: 0 var(--tab-corner);
  
  display: flex;
  align-items: center;
  justify-content: center;
}
    <div class="card">
  <div class="header">
    <div class="label">Header</div>
  </div>
  <div class="content">
  </div>
</div>
    Login or Signup to reply.
  2. 0

    border-radius: 0px 0px 8px 8px;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search