Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  正文 在CSS3中制作小三角形效果代码

在CSS3中制作小三角形效果代码

发布时间:2019-10-31   编辑:www.jquerycn.cn
jquery中文网为您提供在CSS3中制作小三角形效果代码等资源,欢迎您收藏本站,我们将为您提供最新的在CSS3中制作小三角形效果代码资源
现在在前端开发中,经常会看到一些小三角形,如一些导航的下拉菜单,还有一些聊天信息的气泡模式,很多时候我们都是通过切图片的方法来制作,今天零度给大家分享一个完全通过css3实现的小三角效果。

先上html代码:

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy4368')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy4368><div class="arrow-up">
     <!--向上的三角-->
</div>
<div class="arrow-right">
    <!--向右的三角-->
</div>
<div class="arrow-down">
    <!--向下的三角-->
</div>
<div class="arrow-left">
    <!--向左的三角-->
</div>

我使用了四个div分别展示上下左右四个方向的箭头,下面是css代码:

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy3240')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy3240>

/*箭头向上*/
.arrow-up {
    width:0;
    height:0;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-bottom:30px solid #f00;
}

/*箭头向右*/
.arrow-right {
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid green;
}
   
 /*箭头向下*/
.arrow-down {
    width:0;
    height:0;
    border-left:40px solid transparent;
    border-right:40px solid transparent;
    border-top:40px solid #ccc;
}
   
 /*箭头向左*/
.arrow-left {
    width:0;
    height:0;
    border-top:30px solid transparent;
    border-bottom:30px solid transparent;
    border-right:30px solid #00f;
}

  
这样出来的效果就是这样:

\'在CSS3中制作小三角形效果代码\'

颜色和大小当然可以随意控制,这样以后我们就不需要切图了,直接使用css会更简单。

您可能感兴趣的文章:
CSS3实现图片折角效果例子
在CSS3中制作小三角形效果代码
CSS3不用图片写出圆角和三角形气泡效果
IE7,IE8浏览器CSS实现正圆角效果代码
开发人员最常用的HTML5/CSS3代码生成器
纯CSS3图标旋转效果代码
Illustrator简单快速地将图片变成多边形背景制作教程
CSS3 圆角
CSS3中clip-path属性和元素使用方法
css3绘制几何图形的例子

[关闭]