全国服务热线:4008-888-888

技术知识

css3完成小箭头符号各种各样图型实际⊙ω⊙效果

css完成各种各样图型简直太赞了,从此无需网页切图了,立即用css便可以完成。

最经常用的便是用css完成的小三角了

#triangle-up{
	display:inline-block;
	width:0;
	height:0;
	border-left:30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom:50px solid red;}
#triangle-down {
	display:inline-block;
	width:0;
	height:0;
	border-left:30px solid transparent;
	border-right: 30px solid transparent;
	border-top:50px solid red;}
#triangle-left {
	display:inline-block;
	width:0;
	height:0;
	border-top: 30px solid transparent;
	border-right: 50px solid red;
	border-bottom: 30px solid transparent;}
#triangle-right{
	display:inline-block;
	width:0;
	height:0;
	border-top: 30px solid transparent;
	border-left: 50px solid red;
	border-bottom: 30px solid transparent;}


 

#triangle-topleft {
    display:inline-block;
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
}
#triangle-topright {
    display:inline-block;
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-left: 50px solid transparent;
}
#triangle-bottomleft {
    display:inline-block;
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
}
#triangle-bottomright {
    display:inline-block;
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 50px solid transparent;
}

根据那样的小箭头符号在新项目中大家能够完成认证提醒层箭头符号那样的款式,十分的好用,从此无需为提醒层款式犯愁啦。


 

大家见到了完成css小箭头符号的style款式上都采用了transparent那样的一个特性,transparent究竟是啥含意?因此查询了css参照指南,界定是:

用于特定透明颜色。

  • transparent是透明灰黑色(black)的巧记法,即一个相近rgba(0,0,0,0)那样的值。
  • 在CSS1中,transparent被用于做为background-color的一个主要参数值,用以表明情况全透明。
  • 在CSS2中,border-color也刚开始接纳transparent做为主要参数值。
  • 在CSS3中,transparent被拓宽到一切一个有color值的特性上。

transparent我小结含意便是全透明,无色调的。


 

看图,三角形的完成具体上是一个总宽和高宽比都为0的div的四个外框完成的,假如大家要完成朝下的箭头符号,那么就要让div的左~右 外框都为全透明(全透明但上下外框还占位性病变置)。


 

左上箭头符号 完成构思是啥呢?div的右侧框和底端外框都为全透明,那样左上方的箭头符号就外露来啦。


 

css3完成心形

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

到此这篇有关css3完成小箭头符号各种各样图型实际效果的文章内容就详细介绍到这了,大量有关css 小箭头符号 內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服