html+css写三角形

首先我们来看下面一段代码在页面中的效果图：

<!doctype html>
<html><head><meta charset="utf-8"><title>三角形</title><style>.triangle{width: 0;height: 0;border: 300px solid red;border-top-color: black;border-bottom-color: yellow;border-left-color: green;border-right-color: blue;}</style></head><body><div class="triangle"></div></body></html>

效果图：

看到这个效果图，我们就大概知道三角形怎么写了，我们可以将border-bottom设为none这样方块的下半边就没有了

border-bottom: none;

效果图：

然后我们在将border-left 和 border-right的颜色设为透明，这样就只剩border-top了

完整代码：

<!doctype html>
<html><head><meta charset="utf-8"><title>三角形</title><style>.triangle{width: 0;height: 0;border: 100px solid transparent;border-top-color: black;border-bottom: none;border-left-color: transparent;border-right-color: transparent;}</style></head><body><div class="triangle"></div></body></html>

效果图：

html+css写三角形相关推荐

CSS写三角形和一个小风车案例
CSS实现三角形与小风车案例三角形原理盒子设置宽高为0 边框设置为10px solid 颜色为透明transparent 想要在哪个方向的三角形就根据边框的显示的方向 border-right 右 ...
html中如何写不规则图形,CSS写三角形、五角形等不规则图形
写页面的时候时长遇到一些奇怪图形,用css是可以实现各种不规则图形的,下面举例几个常用的: 一.三角形利用border-color支持transparent这一特性,隐藏三条边框,实现三角形. .t ...
HTML之CSS画三角形原理,纯CSS写三角形样式集合（原理解析）
一.实现原理在css3中,我们主要使用的是一个transparent的属性,意思是透明的,比如我们将字体设置为黑色会写color:black,那么如果想把字体的颜色设置为透明,我们可以写color: ...
css写三角形，对号√
三角形:.active::after{content:"";position: absolute;top:0;right:0;width: 0;height: 0;border-t ...
css写出三角形（兼容IE）
利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; border-right: ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
css画三角形(怎么用css画三角形)
如何用css3画一个有边框的三角形如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. ...
css继承和边框圆角及写三角形
1. css可以继承的属性有哪些? Font 系列 text系列 color line-height 2. border-radius的值的问题四个值的顺序是左上右上右下左下. ...
利用CSS伪元素写三角形
在做一些网页布局的时候,经常会遇到各种方向的三角形,常常令人头疼,今天给大家介绍一些利用CSS伪元素写各个方向三角形的方法目录一.CSS伪元素写三角形 1.向右的三角形 2.向上的三角形 3.向下 ...

html+css写三角形

完整代码：

html+css写三角形相关推荐

最新文章

热门文章