Issue
Help me to create border like this.
.child::before {
content: "";
position: absolute;
width: 13px;
height: 13px;
left: -1px;
background: transparent;
border-bottom-left-radius: 7px;
border-left: 0.5px solid;
border-bottom: 0.5px solid;
border-left-color: #808080;
border-bottom-color: #808080;
}
Solution
Hope this will help
ul {
margin: 0;
padding: 0;
list-style: none;
}
.main-ul {
padding-left: 15px;
position: relative;
}
.main-ul:before {
content: "";
width: 2px;
background: #ccc;
position: absolute;
top: 0;
left: 15px;
bottom: 35px;
}
.main-ul label {
padding: 15px 15px 15px 0;
background: #ccc;
display: block;
margin-left: -15px;
z-index: 1;
position: relative;
}
.main-ul .sub-ul li {
position: relative;
padding: 10px;
overflow: hidden;
padding-right: 0;
}
.main-ul .sub-ul li:before {
content: "";
width: 100%;
height: 100%;
border: 2px solid #ccc;
border-radius: 15px;
position: absolute;
left: 0px;
bottom: 50%;
}
.main-ul .sub-ul li span {
display: block;
background: #fff;
position: relative;
z-index: 1;
margin-left: 15px;
padding-left: 5px;
}
<ul class="main-ul">
<li>
<label>Chat Bots</label>
<ul class="sub-ul">
<li><span>Chat GPT</span></li>
<li><span>Poe</span></li>
<li><span>Openbot</span></li>
<li><span>Chat GPT</span></li>
</ul>
</li>
</ul>
Answered By - Steve James
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.