版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yatsov/article/details/79689386
CSS 实现尖角样式
实现思路
实现一个CSS的尖角样式 ，思路为 用两个尖角，我是用的是一个before一个div、将其放到指定的位置，一个小一点作为尖角另外一个大一点作为尖角的border。然后使用position定位以及负的margin将其定位上去即可代码如下。
实现代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body { /* 清除选择的颜色 */
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none;
user-select: none;
}
.drop-list-btn{
background:#41464b;
box-shadow:0 4px 12px 0 rgba(0,0,0,0.20);
border-radius:2px;
width:168px;
height:56px;
margin: 0 auto;
cursor: pointer;
}
.drop-list-btn span{
font-family:PingFangSC-Medium;
font-size:24px;
color:#ffffff;
letter-spacing:0;
line-height:24px;
text-align:center;
display: inline-block;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
height: 30px;
}
.drop-list{
margin: 0 auto;
background:#ffffff;
border:1px solid #dddddd;
box-shadow:0 4px 12px 0 rgba(0,0,0,0.10);
border-radius:2px;
width:249px;
height:319px;
}
.drop-list-item{
width:249px;
height:64px;
}
.drop-list-item:hover{
background:#f5f5f5;
}
.drop-list-item div{
height: 100%;float: left;
}
.drop-list-item div:nth-child(1){
width: 41px;
}
.drop-list-item div:nth-child(2){
width: 40px;background: url(icons/docs@2x.png) no-repeat content-box center;
}
.drop-list-item div:nth-child(3){
width: 23px;
}
.drop-list-item div:nth-child(4){
font-family:PingFangSC-Regular;
font-size:24px;
color:#666666;
letter-spacing:0;
line-height:24px;
text-align:left;
width: 96px;
}
.drop-list-item div:nth-child(4) span{
display: inline-block;top: 50%;transform: translateY(-50%);position: relative;
}
.drop-list::before {
border-right: 13px solid transparent;
border-bottom: 13px solid rgba(0,0,0,0.1);
width: 0px;
border-left: 13px solid transparent;
content: '';
margin-top: -13px;
position: relative;
top: -36px;
left: 119px;
}
.drop-list-triangle{ /*外面的三角形 底色用before*/
border-right:12px solid transparent;border-bottom:12px solid white;width: 0px;border-left:12px solid transparent;margin-top:-12px;position: relative;left: 119.5px;top: -22px;
}
</style>
</head>
<body>
<div class="drop-list-btn">
<span>新建</span>
</div>
<div class="drop-list" style="margin-top: 20px;">
<div class="drop-list-triangle" ></div>
<div class="drop-list-item" >
<div ></div>
<div ></div>
<div ></div>
<div >
<span >文档</span>
</div>
</div>
<div class="drop-list-item" >
<div ></div>
<div style="background: url(icons/[email protected]) no-repeat content-box center;"></div>
<div ></div>
<div >
<span >表格</span>
</div>
</div>
<div class="drop-list-item" >
<div ></div>
<div style="background: url(icons/[email protected]) no-repeat content-box center;"></div>
<div ></div>
<div>
<span >文件夹</span>
</div>
</div>
<div style="width:249px;height: 3px;margin: 8px 0px;">
<div style="border:1px solid #dddddd;width:190px;height:1px;position: relative;margin: 0 auto;"></div>
</div>
<div class="drop-list-item">
<div ></div>
<div style="background: url(icons/[email protected]) no-repeat content-box center;"></div>
<div ></div>
<div >
<span >导入</span>
</div>
</div>
</div>
<script type="text/javascript">
document.getElementsByClassName("drop-list-btn")[0].onclick = function (evt) {
var ele = document.getElementsByClassName("drop-list")[0];
if (ele.style.display=="none"){
ele.style.display="block";
}else{
ele.style.display="none";
}
}
</script>
</body>
</html>效果如下：
