简单用CSS实现三角形

CSS实现三角形

看到一个面试问题：如何用css实现三角形，em，想到自己没写过，然后就实现了下。

方法：
（1）将div的宽高设置成0
（2）加boder属性（四个方向的边框可以实现不同方向的三角形）
实现的效果是这样的：

代码：

<div id="box1"></div><br/>
<div id="box2"></div>

css样式：

<style>/* 彩色三角形 */#box1 {width: 0;height: 0;/* border: 50px solid red; */border-left: 50px solid red;border-right: 50px solid blue;border-top: 50px solid yellowgreen;border-bottom: 50px solid blueviolet;}/* 上三角 */#box2 {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid red;}
</style>

简单用CSS实现三角形相关推荐

css实现三角形原来这么简单啊，可以跟三角形图片说拜拜了
在开发网页时经常需要用到三角形做指示效果. [三角形指示效果] 一般我们会让美工提供好三角形的图片然后用在网页中,这种方式用起来简单,但会增加网页的大小,同时要修改三角形大小.颜色等还需要再去麻烦美工 ...
html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
css空心三角形_（12）把“可以动的盒子”更优雅地展示： “伪元素”妙用 | CSS...
原创:itsOli @前端一万小时本文版权归作者所有,未经授权,请勿转载! 本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 1. 如何使用伪元素来清除浮动 ...
制作京东快递查询 css制作三角形
这是我学习前端道路上制作的一个小案例,想把这些记下来,记录我的学习经历和更加熟练的掌握代码..这个案例是当我们在下面输入数字时上面的盒子会放大的显示出来,效仿的是京东快递查询单号.好了,废物不多说,上 ...
CSS：N种使用CSS 绘制三角形的方法
目录 6种使用 CSS 实现三角形的技巧 1.使用 border 绘制三角形 2.使用 linear-gradient 绘制三角形 3.使用 conic-gradient 绘制三角形 4.transf ...
css画直角三角形,关于CSS画三角形的那些事
用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应不过来.所以,在这篇中点透它,以后再见,不含糊. 原理分析用CSS画三角形,实际上就 ...
【CSS】CSS实现三角形（一）
话不多说,下面介绍两种比较常用的写法: 一.border边框宽和高都设置为0px,通过border的交点创建三角形,这应该是使用的最多的一种写法. .triangle{width: 0;height ...
CSS实现三角形原理及过程
CSS实现三角形原理及过程在开发中,遇到很多的列表都需要用到三角形的箭头,可以直接用一个图片作背景铺垫,但这样占用一定的内存,对于这种简单的图形纯CSS也能实现,它占用的内存相对图片较小,所以相比而 ...

简单用CSS实现三角形

CSS实现三角形

简单用CSS实现三角形相关推荐

最新文章

热门文章

简单用CSS实现三角形

CSS实现 三角形

简单用CSS实现三角形相关推荐

最新文章

热门文章

CSS实现三角形