伪类实现特殊图形,一个span加三角形

题目如图:

实现思路:

伪类+三边透明的三角形实现

 

代码:

<span class="wei">wei</span>

.wei{
display: inline-block;
width: 100px;
height: 100px;
background: gray;
position: relative;
}
.wei:after{
content: '';
position: absolute;
bottom: 0;
left: 100%;
border: 50px solid transparent;
border-left-color: gray;
}

 

posted @ 2017-06-23 16:29  FEDeveloper  阅读(1764)  评论(0编辑  收藏  举报