I want to render a box on another box's border, like shown in this image: Expected Output

I tried doing this using flexbox, but couldn't come up with any solution.

How can I approach this design? Any help would be appreciated!

CodePudding user response：

This is a reproduction as close as possible to that picture you showed.

The positioning is obtained using position:relative for the card container and position:absolute for its inner parts.

.card{
  position:relative;
  width: 400px;
  height: 200px;
  border: solid 2px gray;
  border-radius: 15px;
  padding: 5px 5px 5px 5px;
  text-align: center;
  background: linear-gradient(white 50%, #F1FAFF 50%); 
  margin-top: 100px;
}

.inner{
  border: solid 1px lightgray;
  border-top: none;
  height: 80%;
  width: calc(100% - 20px);
  box-shadow: 0px 2px 2px lightgray;
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: white;
}

.label{
  position: absolute; 
  top: -15px;
  left: 25px;
  background: #F5F5F5;
  padding: 5px 10px;
  font-family: sans-serif;
  font-weight: 600;
  border-radius: 5px;
}

<div >
  <div >13 Mar - 12 Apr</div>
  <div >
  </div>
</div>

CodePudding user response：

That can be achieved using legend. If you want custom style, then use postiion: relative on parent div (what you call the box with border), use position: absolute on the child div and adjust top, left, margins or translate values.

CodePudding user response：

You can use two div do to it.

1. first div with border
2. second div for shadow box

.outer{
  border:2px solid #333;
  width:200px;
  height:150px;
  border-radius:20px;
}

.inner{
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
width:180px;
height:130px;
margin:10px;
}

<div >
  <div >
  </div>
</div>