在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧!

 .next的position都要是relation

第一种:一个90度的“ > ”,  只有线条。(可以做下拉框的箭头之类的) 例如: 用css伪类制作三角形的三种方法

.next:after
{
content: "";
width: 6px;
height: 6px;
border-left: 1px solid #666;
border-bottom: 1px solid #666;
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
position: absolute;
right: 9px;
top: 20px;
}

如果需要背景的话,可以加background-color,这样可以让图标覆盖下面的颜色。

第二种:带颜色的。例如:用css伪类制作三角形的三种方法

.next:after
{

position: absolute;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #f5f5f5;
content: " ";
display: block;
width: 0;
height: 0;
top: -8px;
left: 20px;

}

 

第三种:线条+颜色。原理,用两个不同颜色的伪类重叠。

例如:用css伪类制作三角形的三种方法

.pos_rel {
position: relative;
_line-height: 0;
}

.pos_rel .icon1 {
display: block;
border-width: 9px 9px 9px 0;
border-color: transparent #1c7ecf transparent transparent;
border-style: solid;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
}

.pos_rel .icon2 {
display: block;
border-width: 9px 9px 9px 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
position: absolute;
left: 4px;
top: -9px;
width: 0;
height: 0;
}

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-07-13
  • 2022-12-23
  • 2021-11-20
  • 2021-11-20
猜你喜欢
  • 2022-12-23
  • 2022-01-03
  • 2022-12-23
  • 2022-01-23
  • 2021-09-22
  • 2021-10-21
相关资源
相似解决方案