How to make advance shape of CSS? [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I wonder that if someone could provide or suggest me how to make a css style better approach than mine?
This is what expected shape :
What is done so far :
.labelModel {
display: block;
position: absolute;
z-index: 100;
border: 2px solid #ccc;
background-color: #404040;
cursor: pointer;
border-radius: 10px;
padding: 10px;
width: 12rem;
height: 12rem;
color: white;
margin-left: 100px;
}
.line-infocard {
position: relative;
top: 200px;
width: 150px;
height: 5px;
z-index: 99;
border: 2px solid #ccc;
background-color: #404040;
transform: rotate(-45deg);
}
<div>
<div class="line-infocard"></div>
<div class="labelModel">info :</div>
</div>

Answer 1

.labelModel {
display: block;
position: absolute;
z-index: 100;
border: 2px solid #ccc;
cursor: pointer;
width: 12rem;
height: 12rem;
margin-left: 100px;
}
.labelBox{
background-color: #404040;
width:89%;
height:89%;
padding: 10px;
transform: rotate(1deg);
color:orange;
}
.line-infocard {
position: relative;
top: 200px;
right:50px;
width: 150px;
height: 2px;
z-index: 99;
background-color: #404040;
transform: rotate(-60deg);
}
.line-infocard::after{
content:'';
width:2px;
height:40px;
background-color:black;
top: 88%;
right: -11px;
position: absolute;
transform: rotate(
-28deg);
}
<div>
<div class="line-infocard"></div>
<div class="labelModel">
<div class="labelBox">
info :
</div>
</div>
</div>