css3画三角形

以下是用css3画3角形,效果如下图

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    span{ display:inline-block; margin-right:10px}
    .triangle_top{height:0;width:0; border:10px solid;  border-color:transparent  transparent red transparent;}
    .triangle_left{height:0;width:0; border:10px solid;  border-color:transparent  red transparent transparent;}
    .triangle_right{height:0;width:0; border:10px solid; border-color:transparent transparent transparent  red;}
    .triangle_bottom{height:0;width:0; border:10px solid;  border-color:red transparent transparent transparent;}
</style>
</head>

<body>
<span class="triangle_top"></span>
<span class="triangle_left"></span>
<span class="triangle_right"></span>
<span class="triangle_bottom"></span>
</body>
</html>
时间: 2024-10-05 18:08:26

css3画三角形的相关文章

css3画三角形的原理

以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 再给相应的div加上对应的class,一个如下的三角形就用css画好了

转 css3画三角形的原理

转自  www.cnblogs.com/huangzhilong/p/5030659.html 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; } 再给相应的div加上对应的class,一个如下的三角形就用css画好了 当时

css3 画三角形

/*箭头向下*/ .arrow-up { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #000;} /*箭头向下*/.arrow-down { width:0; height:0; border-left:20px solid transparent; border-right:20px solid tran

css伪元素before/after和画三角形的搭配应用

想要实现的效果如下: 第一步:如何用css画出三角形? 1 /* css画三角形 */ 2 .sanjiao{ 3 width:0; 4 border-top:40px solid red; 5 border-bottom:40px solid green; 6 border-left:40px solid blue; 7 border-right:40px solid yellow; 8 } 9 10 <div class="sanjiao"> 11 </div&g

用CSS border相关属性画三角形

效果 HTML: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Triangle Demo</title> <link rel="stylesheet" href="triangle.css"> </head> <body&g

教你几何画板画三角形内切圆的方法

几何画板的几何绘图功能让其它几何绘图工具望尘莫及,它可以完全取代数学中的三角尺和圆规.下面我们就来看一看怎样用几何画板画三角形的内切圆. 具体操作如下: 选择“线段直尺工具”,构造出一个三角形ABC. 构造角平分线.依次选择点A.B.C,选择“构造”—“角平分线”命令,做出角ABC的角平分线.相同的方法作出角BAC的角平分线,注意选取点的顺序.点击两个角平分线的交点,命名为D. 构造垂线.选择点D.线段AB,选择“构造”—“垂线”命令.这条垂线与线段AB相交于点E. 绘制三角形内切圆.选中点D和

【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

[二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了. 这次写的详细一点,把各个部位都拆出来分析. 第一步:头部轮廓 <header></header> .ultraman header

如何使用CSS3画出一个叮当猫

刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触,所以很乐意去尝试一下,对于我这种菜鸟,确实是帮助不少,至少懂得如何去画一个简单的 人物形象出来,再加上一些动画效果,就活了,那就更好玩了!OK,开始之前,先把效果图晒一下: PS:说实话,我觉得挺可爱的,小时候经常看多啦A梦,突然感觉很亲切,很童真,瞬间年轻了好多,哈哈!热烈的笑脸 首先,先把H

使用CSS画三角形

很多时候我们会遇到需要应用三角形元素的场景,比如一个下拉菜单的交互提示: 或者一个页旁的装饰性标签: 实际上,给页面添加三角形的解决方案有很多,用CSS.SVG.Canvas,甚至用PS画一个贴上去都可以,但是我们在考虑解决方案时一定要选择最优的那个.可以肯定的是,当对三角形的功能需求比较简单和单一的时候,图片是首先被排除的方案.图片的难以维护性为页面的调试和修改都带来了一定的困难,所以当一个问题可以用代码来解决的时候我们一定要首先考虑它.再来考虑Canvas,尽管Canvas相对容易修改,但它