css实现实心三角形、有边框的三角形和空心三角形

1、实心三角形

<div class="up"></div> <!--向上的三角形--><div class="down"></div> <!--向下的三角形--><div class="left"></div> <!--向左的三角形--><div class="right"></div> <!--向右的三角形-->

/*想获取朝那边三角形,给相反的一边设置颜色,font-size: 0;line-height: 0;可以兼容ie6*/.up{width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid #f00;font-size: 0;line-height: 0;}.down{width: 0;height: 0;border-left: 20px solid transparent;border-right: 20px solid transparent;border-top: 20px solid #f00;font-size: 0;line-height: 0;}.left{width: 0;height: 0;border-top: 20px solid transparent;border-right: 20px solid #f00;border-bottom: 20px solid transparent;font-size: 0;line-height: 0;}.right{width: 0;height: 0;border-top: 20px solid transparent;border-left: 20px solid #f00;border-bottom: 20px solid transparent;font-size: 0;line-height: 0;}

2、有边框的三角形

<!--向上的三角形--><div class="border-up"><span></span></div><!--向下的三角形--><div class="border-down"><span></span></div><!--向左的三角形--><div class="border-left"><span></span></div><!--向右的三角形--><div class="border-right"><span></span></div>

.border-up{width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 30px solid #333;position: relative;margin: 50px auto;}.border-up span{display: block;width: 0;height: 0;border-left: 28px solid transparent;border-right: 28px solid transparent;border-bottom: 28px solid #F0981C;position: absolute;left: -28px;top: 1px;}.border-down{width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-top: 30px solid #333;position: relative;margin: 50px auto;}.border-down span{display: block;width: 0;height: 0;border-left: 28px solid transparent;border-right: 28px solid transparent;border-top: 28px solid #F0981C;position: absolute;left: -28px;top: -29px;}.border-left{width: 0;height: 0;border-bottom: 30px solid transparent;border-right: 30px solid #333;border-top: 30px solid transparent;position: relative;margin: 50px auto;}.border-left span{display: block;width: 0;height: 0;border-bottom: 28px solid transparent;border-right: 28px solid #F0981C;border-top: 28px solid transparent;position: absolute;left: 1px;top: -28px;}.border-right{width: 0;height: 0;border-left: 30px solid #333;border-bottom: 30px solid transparent;border-top: 30px solid transparent;position: relative;margin: 50px auto;}.border-right span{display: block;width: 0;height: 0;border-left: 28px solid #F0981C;border-bottom: 28px solid transparent;border-top: 28px solid transparent;position: absolute;left: -29px;top: -28px;}

3、空心三角形

<!--空心的三角形--><!--向上的三角形--><div class="border-up-empty"><span></span></div><!--向下的三角形--><div class="border-down-empty"><span></span></div><!--向左的三角形--><div class="border-left-empty"><span></span></div><!--向右的三角形--><div class="border-right-empty"><span></span></div>

.border-up-empty{width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 30px solid #333;position: relative;margin: 50px auto;}.border-up-empty span{display: block;width: 0;height: 0;border-left: 28px solid transparent;border-right: 28px solid transparent;border-bottom: 28px solid #F0981C;position: absolute;left: -28px;top: 2px;}.border-down-empty{width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-top: 30px solid #333;position: relative;margin: 50px auto;}.border-down-empty span{display: block;width: 0;height: 0;border-left: 28px solid transparent;border-right: 28px solid transparent;border-top: 28px solid #F0981C;position: absolute;left: -28px;top: -30px;}.border-left-empty{width: 0;height: 0;border-bottom: 30px solid transparent;border-right: 30px solid #333;border-top: 30px solid transparent;position: relative;margin: 50px auto;}.border-left-empty span{display: block;width: 0;height: 0;border-bottom: 28px solid transparent;border-right: 28px solid #F0981C;border-top: 28px solid transparent;position: absolute;left: 2px;top: -28px;}.border-right-empty{width: 0;height: 0;border-left: 30px solid #333;border-bottom: 30px solid transparent;border-top: 30px solid transparent;position: relative;margin: 50px auto;}.border-right-empty span{display: block;width: 0;height: 0;border-left: 28px solid #F0981C;border-bottom: 28px solid transparent;border-top: 28px solid transparent;position: absolute;left: -30px;top: -28px;}

其实空心三角形就是对有边框的三角形的定位改变

css实现实心三角形、有边框的三角形和空心三角形相关推荐

css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
css实现带小三角形的边框
主要方法是使用伪元素before和after,之前已经总结过伪元素before.after用法,它们效果相当于在标签的内部放置一个最前或者最后的标签,添加的标签同样的能够继承父元素的属性,那么通过伪元 ...
CSS画实心三角形【格智网络科技面试题】
画一个三角形,首先想到的是如何画三角形的形状,然后给一个背景颜色.但是在写div时,会发现,div是的边框是直线.那么,我想到,要是给div的高和宽设置为0,然后设置四个border不同的颜色,那么这 ...
CSS实现实心三角形和空心三角形
一次开发中遇到,记录代码原理: 1.给一个div,宽和高都为0的时候,盒子什么都没有看起来.为空白 2.给一个宽高为0的盒子给一遍像素给100px的上边,下边和右边, .jiao{ position ...
css空心三角形_（12）把“可以动的盒子”更优雅地展示： “伪元素”妙用 | CSS...
原创:itsOli @前端一万小时本文版权归作者所有,未经授权,请勿转载! 本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 1. 如何使用伪元素来清除浮动 ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
html空心三角形这么编码,css空心三角的三种实现方式
在做如算上处定面一这我作问汇u应色会进灯样近页面的时候经常会用到空心三角,这里总结一下我所知道的空心三角的三种功一新说讲为其年次供.发了架人据模制理个通似会业文告个了者到作会也转动和矿大一效实现方法. ...

css实现实心三角形、有边框的三角形和空心三角形

css实现实心三角形、有边框的三角形和空心三角形相关推荐

最新文章

热门文章