写这个原因是今天看到某平台有个‘{’的列表样式,我就在想他是如何实现的。结过和小鸣同xio和其他的群友沟通后,集思广益搞了几种实现方法:
1.wrh同学提供的方法是:用svg实现
<svg width="100" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M0 100 A 50 50,0,0,0,50 50 L 50 25 A 25 25,0,0,1,75 0" stroke="blue" stroke-
width="4" fill="transparent"/>
<path d="m0 100 A 50 50,0,0,1,50 150 L 50 175 A 25 25,0,0,0,75 200 " stroke="blue"
stroke-width="4" fill="transparent"/>
</svg>
2.用字体大体直接改变font-size:20px;
3.用css实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.app-box-Contacts {
position: relative;
width: 100%;
min-width: 300px;
display: table;
}
.app-box-Contacts>.row {
display: table-row;
}
.app-box-Contacts>.row>.title,
.app-box-Contacts>.row>.list {
display: table-cell;
vertical-align: middle;
}
.app-box-Contacts>.row>.title {
position: relative;
width: 60px;
padding-right: 10px;
text-align: right;
font-size: 14px;
border-right: 1px solid #373d41;
}
.app-box-Contacts>.row>.title::after {
/* content: "";
position: absolute;
top: 0;
right: -6px;
width: 6px;
height: 1px;
background-color: #373d41; */
content: '';
height: 5px;
width: 5px;
right: -6px;
top: -5px;
position: absolute;
border: 1px solid #000;
border-top-left-radius: 100%;
border-right: none;
border-bottom: none;
}
.app-box-Contacts>.row>.title::before {
/* content: "";
position: absolute;
bottom: 0;
right: -6px;
width: 6px;
height: 1px;
background-color: #ccc; */
content: '';
height: 5px;
width: 5px;
right: -6px;
bottom: -5px;
position: absolute;
border: 1px solid #000;
border-bottom-left-radius: 100%;
border-top: none;
border-right: none;
}
.app-box-Contacts>.row>.title>.jiao {
position: absolute;
right: 0;
top: 50%;
margin-top: -4px;
height: 0px;
width: 0px;
border-top: 4px solid transparent;
border-right: 5px solid black;
border-bottom: 4px solid transparent;
}
.app-box-Contacts>.row>.title>.jiao::after {
content: '';
position: absolute;
top: -7px;
left: 2px;
border-top: 7px solid transparent;
border-right: 12px solid #FFFFFF;
border-bottom: 7px solid transparent;
}
.app-box-Contacts>.row>.list {
text-align: left;
padding-left: 10px;
}
.app-box-Contacts>.row>.list .li {
height: 30px;
line-height: 30px;
}
.app-box-Contacts>.row>.list .li>.name {
padding-right: 5px;
}
.app-box-Contacts>.row>.list .li>.item-span {
cursor: pointer;
}
</style>
</head>
<body>
<div class="app-box-Contacts">
<div class="row">
<div class="title">
标题<span class="jiao"></span>
</div>
<div class="list">
<div>
<span class="item-span ">内容1</span>
</div>
<div>
<span class="item-span ">内容2</span>
</div>
<div>
<span class="item-span ">内容3</span>
</div>
</div>
</div>
</div>
</body>
</html>
本文是记录和学习的文档,如果有帮到同学们,点个赞吧!!!