css3 图片边上三角形

CSS3是现在网页设计中不可或缺的一部分，除了常用的排版、字体、颜色等基础功能外，还有许多酷炫的效果可供使用。今天我们来学习如何使用CSS3在图片边上添加三角形。

/*添加三角形*/.triangle-left{
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-right: 20px solid #000;
      border-bottom: 20px solid transparent;
      float: left;
}

上述CSS代码中，我们创建了一个类名为“triangle-left”的元素，这个元素的宽度和高度均为0，但是通过设置它的border属性的不同值，我们让它呈现出一个左上角朝外的三角形。其中border-top和border-bottom属性的值为transparent，是为了让三角形中间透明，显示为一个三角形。

/*应用样式*/  

在HTML中，我们将三角形元素放在图片元素外侧，通过浮动让它们处于同一行。然后，我们就可以看到图片边上出现了一个酷炫的三角形。

同样的，我们也可以创建其他朝向的三角形，只需要改变border属性的值即可。

/*朝右的三角形*/.triangle-right{
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-left: 20px solid #000;
      border-bottom: 20px solid transparent;
      float: right;
}
/*朝下的三角形*/.triangle-down{
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 20px solid #000;
}
    

通过这种方式，我们可以为网页元素添加一个独特的视觉效果，使其更加引人注目。当然，CSS3还有许多其他的特性等待我们去发掘和学习。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！