css 伪类 制作箭头

注意注意.......

所有的前提是：给添加伪类的元素添加position: relative;

 

背景色的箭头：

  content: '';
  position: absolute;
  top: 14px;
  right: 6px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: #d9d9d9;

　　

线条的箭头：

  content: ' ';
  display: inline-block;
  -webkit-transform: rotate(314deg);
  -ms-transform: rotate(314deg);
  transform: rotate(314deg);
  height: 0.5rem;
  width: 0.5rem;
  border-width: 0 0 2px 2px;
  border-color: #d9d9d9;
  border-style: solid;
  position: absolute;
  top: 10px;
  right: 13px;

 

半圆：

position: absolute;
right: 0px;
top: 2px;
display: block;
content: "";
width: 15px;
height: 6px;
line-height: 6px;
text-align: center;
margin: 20px;
border-radius: 20px 20px 0 0;
border: 3px solid red;
border-bottom: 0;
transform: rotate(180deg);