文档章节

怎样用css画出一个三角

zhuzhuguang
 zhuzhuguang
发布于 2014/09/16 08:19
字数 140
阅读 10
收藏 0

使用css可以在网页上画出一个三角型和类似的图形,而不用image

主要是利用css的border属性。

1. 将某个div的width和height属性都设置为0

2. 将border-width设置成50

3. 将border-style设置成solid

4. 将border-color设置成某一种颜色

    4条边如果某3条边颜色设置成白色,那么就可以出现一个三角形

<div id="mydemo"></div>


#mydemo {
	border-top:20px solid red;
	border-right:20px solid white;
	border-bottom:20px solid white;
	border-left:20px solid white;
	width:0px;
	height:0px;
}

© 著作权归作者所有

zhuzhuguang
粉丝 3
博文 24
码字总数 6185
作品 0
朝阳
程序员
私信 提问
神奇的 CSS 形状

在StackOverflow上有这么一个问题,有位同学在http://css-tricks.com/examples/ShapesOfCSS/ 找到一些使用CSS做的形状,其中一位同学对下面的这个形状充满了疑问。 形状是: 代码是: 1 2 3 ...

虫虫
2012/03/25
3.7K
28
CSS边框外的小三角形+阴影效果的实现。

本文转载于:猿2048网站CSS边框外的小三角形+阴影效果的实现。 ...虽然是一个很小的问题,但其实还是挺实用的。 实现一个边框外的角。 用纯CSS来写。 一开始实现的效果是这个样子的。 但是这个...

前端老手
09/06
18
0
怎么在几何画板中作三角形的高

几何画板作为一种常用的几何绘图工具,可以用来画各种几何图形,甚至可以将在黑板上无法画的图形都能够画出来。前面的教程中,学习了用几何画板作三角形的中线、三角形的内心的方法,那么怎么...

学术研究软件
2016/11/14
23
0
CSS绘制三角形—border法

1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形: 实现原理: 首先来看在为元素添加border时,border的样子;假设有如下代码: 效果图: 这是我们平常使...

阿尔卑斯的隆冬
2018/08/31
0
0
纯CSS画基本图形(圆形、三角形、多边形、爱心、八卦)

1、正方形 CSS代码如下: 最终效果: 2、长方形 CSS代码如下: 最终效果: 3、圆形 CSS代码如下: 最终效果: 4、椭圆 CSS代码如下: 最终效果: 5、上三角 CSS代码如下: 最终效果: 6、下三...

DCX_abc
2017/11/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

5 分钟快速学习,缓存一致性优化方案!

缓存操作 读缓存 读缓存可以分为两种情况命中(cache hit)和未命中(cache miss): 缓存命中 首先从缓存中获取数据 将缓存中的数据返回 缓存未命中 首先从缓存中获取数据 此时缓存未命中,...

架构文摘
13分钟前
4
0
【从入门到放弃-ZooKeeper】ZooKeeper实战-分布式锁-升级版

设计 我们依然实现java.util.concurrent.locks.Lock接口。 和上一文中实现方式不同的是,我们使用ZooKeeper的EPHEMERAL_SEQUENTIAL临时顺序节点。 当首次获取锁时,会创建一个临时节点,如果...

阿里云官方博客
14分钟前
3
0
inner join 和 union all 做的汇总区别

inner join CREATE OR REPLACE VIEW M_INVENT_BARCODE_DIFF ASSELECT "INV_PART_NO","INV_ONHAND","INV_LOCATION","PART_NO","BAR_ONHAND","BAR_LOCATION"FROM (SELECT m.part_no AS......

donald121
20分钟前
4
0
EMC 设计经验总结

整体布局 1、高速、中速、低速电路要分开; 2、强电流、高电压、强辐射元器件远离弱电流、低电压、敏感元器件; 3、模拟、数字、电源、保护电路要分开; 4 、多层板设计,有单独的电源和地平...

demyar
24分钟前
3
0
支付宝高级Java现场面试35题:页锁+死锁+集群+雪崩+负载等

年底是冲刺大厂的良机,这个时间点大部分人都在观望年终奖与加薪幅度,看情况再伺机而动,人才市场的竞争反而没那么激烈。 获悉到支付宝近期有HC放出,我通过内推渠道,得到了支付宝的面试机...

mikechen优知
26分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部