效果图
HTML 标签
???<div class="main"> ?????<div class="small"> ???????<div class="big-area"> ?????????<span>热销</span> ???????</div> ???????<div class="small-l"> ???????</div> ???????<div class="small-r"> ???????</div> ?????</div> ???</div>CSS 代码
?????html, body { ???????margin: 0; ???????padding: 0; ?????} ?????.main { ???????width: 200px; ???????height: 200px; ???????margin: 0 auto; ???????border: #000 1px solid; ?????} ?????.small { ???????height: 60px; ???????width: 40px; ???????margin: 0 auto; ???????overflow: hidden; ?????} ?????.big-area { ???????width: 40px; ???????height: 40px; ???????line-height: 40px; ???????background: #000; ???????color: #fff; ???????text-align: center; ?????} ?????.small-l { ???????width: 0px; ???????height: 0px; ???????margin: 0 auto; ???????border-top: #000 10px solid; ???????border-bottom: transparent 10px solid; ???????border-left: transparent 10px solid; ???????border-right: #000 10px solid; ???????display: inline-block; ???????float: right; ?????} ?????.small-r { ???????width: 0px; ???????height: 0px; ???????margin: 0 auto; ???????border-top: #000 10px solid; ???????border-bottom: transparent 10px solid; ???????border-left: #000 10px solid; ???????border-right: transparent 10px solid; ???????display: inline-block; ???????float: right; ?????}CSS 手动画热销小图标
原文地址：https://www.cnblogs.com/zhourongcode/p/9226704.html