CSS3之创建透明边框三角_html/css_WEB-ITnose

简述

在前面，我们分享过关于三角的实现方式，主要根据border属性来设置，下面我们来实现上、下、左、右各种不同颜色的三角。

简述

实现

效果

源码

实现

效果

源码

<style type="text/css">/* 上三角 */.arrow-up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid green;}/* 下三角 */.arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid orange;}/* 右三角 */.arrow-right { width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid blue;}/* 左三角 */.arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid silver;}</style><div class="arrow-up"></div>  <div class="arrow-down"></div>  <div class="arrow-left"></div>  <div class="arrow-right"></div>

代码比较简单，我就不过多阐述了！

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！