圆形下面一个小三角

//html
<div class="q-question">Q
  <span class="l-triangle"></span>
</div>
<div class="a-answer">A
  <span class="r-triangle"></span>
</div>
// css
<style lang="less" scoped>
.q-yellow,.a-yellow{
  position:relative;
  background: #FFB93E;
  width: 40/75rem;
  height: 40/75rem;
  font-size: 28/75rem;
  display:inline-block;
  text-align:center;
  color: #fff;
  border-radius: 50%;
  line-height: 40/75rem;
}
.a-yellow{
  background: #66D3CE;
}
.l-triangle{
  display:inline-block;
  position:absolute;
  left:-1px;
  bottom:0;
  width:0;
  height:0;
  border-bottom:10px solid #FFB93E;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.r-triangle{
  display:inline-block;
  position:absolute;
  z-index:-1;
  right:-1px;
  bottom:0;
  width:0;
  height:0;
  border-bottom:10px solid #66D3CE;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
</style>

 

转载于:https://www.cnblogs.com/ron123/p/9473949.html