css实现小三角效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻标题实例</title>
<style type="text/css">
#demo{
100px;
height:100px;
border: 2px #000 solid;
background-color:#fff;
position:relative;
}
#demo:before, #demo:after{
0px;
height:0px;
border:transparent solid;
position:absolute;
left:100%;
content:""
}
/*注意content虽然没有值,但是必须得加上*/

#demo:before{
border-10px;
border-left-color: #000;
top:20px;
}
#demo:after{
/* border-8px; 是为了覆盖黑色的框。*/
border-8px;
border-left-color: #fff;
top:22px;
}
</style>
</head>
<body>
<div id="demo">

</div>
</body>
</html>

原文地址:https://www.cnblogs.com/momozjm/p/5729876.html