CSS 实现尖角样式

本文主要是介绍CSS 实现尖角样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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/chart@2x.png) 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/folder@2x.png) 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/upload@2x.png) 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>