html div画三角,css画三角形

CSS三角形

.box {

width: 100px;

height: 100px;

border: 10px solid #666;

}

这个很明显，呈现的是border为10px的一个正方形

Square-正方形

改变正方形的颜色，box的样式

.box {

width: 100px;

height: 100px;

border: 10px solid #666;

border-left-color:red;

border-right-color:orange;

border-bottom-color:skyblue;

border-top-color:pink;

}

Square

改变box宽高为0，增加border宽度

.box {

width: 0px;

height: 0px;

border: 100px solid #666;

border-left-color:red;

border-right-color:orange;

border-bottom-color:skyblue;

border-top-color:pink;

}

Eight triangles

变成了四种颜色的三角形，那么用transparent让上，右，左边的三角形边透明不就出现了我们想要的三角形了。

.box {

width: 0px;

height: 0px;

border: 100px solid #666;

border-left-color:transparent;

border-right-color:transparent;

border-bottom-color:skyblue;

border-top-color:transparent;

}

Triangle

当然还可以添加border-bottom-width: 200px;，三角形现在就变成了这样

Triangle

gzh.jpg

每日分享前端技术知识，致力于帮助更多前端人翻过一座座山，踏过一个个坑。

html div画三角,css画三角形相关推荐

html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
html css画五角星,css画梯形，css画五角星， css画六角星，css画六边形
css画梯形,css画五角星, css画六角星 ,css画六边形 css画梯形 .triangle { border-bottom: 100px solid #F36823; border-left: ...
使用css画太极,CSS画太极阴阳图
引言 CSS可以画很多图形,今天我们来画一个特殊的图形--中国古代哲学的"太极图". 如果没有用CSS画过简单图形,建议先学习如何用border属性画三角形. 构思步骤 1.在 ...
css做三角形横线加小三角,CSS创建三角形（小三角）的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
html css 画电池,CSS画的电量提示图形
CSS 语言: CSSSCSS 确定 *, *:before, *:after { box-sizing: border-box; } .wrapper { position: fixed; top: ...
css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
css画三角形(怎么用css画三角形)
如何用css3画一个有边框的三角形如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. ...
5、css画三角形？原理是什么？
简介 css画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四部: 设置一个盒子设置四周不同颜色的边框将盒子的宽高设置为0,仅保留边框得到四个三角形,选择其中一个后,其他三角形(边框)设 ...

html div画三角,css画三角形

html div画三角,css画三角形相关推荐

最新文章

热门文章