<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
.div{width:200px;height:200px;background:#396;margin-left:300px;position:relative;}
.div:after {
width: 0px;
height: 0px;
content: '';
border-style: solid;
border-width: 0px 0px 60px 86px;
border-color: #ed2 #0f0 #396 transparent;
position: absolute;
left: -86px;
top: 80px;
}
.div:before {
width: 0px;
height: 0px;
content: '';
border-style: solid;
border-width: 0px 0px 32px 86px;
border-color: #ed2 #0f0 #fff transparent;
position: absolute;
left: -86px;
top: 108px;
z-index: 3;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>

浏览器效果图:

border绘制尖角图形

 

相关文章:

  • 2021-04-08
  • 2022-12-23
  • 2022-03-07
  • 2021-07-18
猜你喜欢
  • 2021-09-30
  • 2021-06-09
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案