【小5聊】CSS基础之设置小箭头图标

【整体效果】

<div style="
  background-color:transparent;
  width:0px;
  font-weight: bold;
  border: 80px solid transparent;
  border-top-color: #099dff;
  border-right-color: #f60;
  border-bottom-color: #0ccdff;
  border-left-color: #a1b2c3;
  margin:20px;
  "></div>

【只显示右边和底部边框效果】

<div style="
  background-color:transparent;
  width:0px;
  font-weight: bold;
  border: 80px solid transparent;
  /* border-top-color: #099dff; */
  border-right-color: #f60;
  border-bottom-color: #0ccdff;
  /* border-left-color: #a1b2c3; */
  margin:20px;
  "></div>

【向下的箭头效果】

<div style="
  background-color:transparent;
  width:0px;
  font-weight: bold;
  border: 80px solid transparent;
  border-top-color: #099dff;
  /* border-right-color: #f60; */
  /* border-bottom-color: #0ccdff; */
  /* border-left-color: #a1b2c3; */
  margin:20px;
  "></div>

【向下的箭头效果】

<div style="
  background-color:transparent;
  width:0px;
  font-weight: bold;
  border: 80px solid transparent;
  /* border-top-color: #099dff; */
  /* border-right-color: #f60; */
  border-bottom-color: #0ccdff;
  /* border-left-color: #a1b2c3; */
  margin:20px;
  "></div>