猫史档案馆


CoCo+css+html显示折角效果(可能代码不是那么的DRY,能用……)

用户:Full_MarkFull_Mark查看:0 回复:1 评论:0 创建时间:2023-01-12T11:03:15


直接在自定义控件中复制这个链接:https://api.coco-central.cn/temp/read/38557.js

导入过后在“在这里粘贴H喵L”积木中复制以下代码:

<html>
<head>
<meta charset="utf-8">
<style>
::-webkit-scrollbar {
/*滚动条整体样式*/
width : 0px; /*高宽分别对应横竖滚动条的尺寸*/
height: 0px;
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
background :rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-track {
/*滚动条里面轨道*/
border-radius: 10px;
background : rgba(0, 0, 0, 0);
}

#wu{
width:320px;
height:700px;
overflow-y:auto;
white-space: nowrap;
list-style: none;
}

#pu{
width:280px;
height:170px;

}

#jiao{
width:27px;
height:27px;
background: linear-gradient(135deg, transparent 45%, rgba(0, 0, 0, 0.03) 0) ;
border-radius: 0px 0px 9px 0px ;
background-position: right 0px bottom 0px;
box-shadow: 4.5px 4.5px 6px -1px #DCDCDC;
}

#card{
list-style: none;
margin-top:30px;
width:130px;
height:170px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0) 18px, #fff 0%) ;
border-radius: .6em;
}

#card2{
list-style: none;
margin-top:30px;
margin-left:150px;
width:130px;
height:170px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0) 18px, #fff 0%) ;
border-radius: .6em;
}

#lin_shi{
list-style: none;
margin-top:30px;
margin-left:150px;
width:130px;
height:170px;
background:rgba(0, 0, 0, 0) ;/*#fff*/
border-radius: .6em;
}

</style>
</head>
<body>
<div id="pu">
<div id='lin_shi'></div>
<div id='lin_shi'></div>
</div>
<ul id="wu">
<div id="pu">
<div id='card'>
<div id='jiao'>
</div>
</div>
</ul>
</body>
</html>


回复

上一页1 页 / 共 1下一页
无名路无名路

CoCo=javascript+html+css+中国广东的点猫科技推出的图形化。

点赞0


评论