用CSS画个三角形
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#trangle {
display: inline-block;
width: 200px;
height: 200px;
border-left: 100px solid #333;
border-right: 100px solid #678;
border-top: 100px solid #91b;
border-bottom: 100px solid #eee;
}
</style>
</head>
<body>
<span id="trangle"></span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#trangle {
display: inline-block;
border-left: 100px solid #333;
border-right: 100px solid #678;
border-top: 100px solid #91b;
}
</style>
</head>
<body>
<span id="trangle"></span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#trangle {
display: inline-block;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid #91b;
}
</style>
</head>
<body>
<span id="trangle"></span>
</body>
</html>
把两边设置transparent透明就可以l，利用border的特性
用CSS画个三角形的更多相关文章
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
- CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- Effective前端3：用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- Effective前端1---chapter 2 用CSS画一个三角形
1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...
- Effective前端(3)用CSS画一个三角形
来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以 ...
- CSS画出三角形（利用Border）
画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...
随机推荐
- href和src的使用场景
href和src的使用场景 href和src的用法虽然简单,但是有时候会突然记不起来该怎么用,且两者不可相互替换,下面列出来方便记忆,并给出具体区别. href的使用: 1.外部css引用:<l ...
- spring-boot-cli
- 云服务程序在启动的时候执行Powershell脚本
如果在云服务程序启动时候,需要执行Powershell脚本,我们需要将脚本嵌入到程序中,并且编写一个cmd来执行这个脚本,具体如下: 1.编写测试的Powershell脚本:每隔10分钟 检测dns ...
- OBJ Loader Source Code
https://github.com/ChrisJansson/ObjLoader http://www.codeproject.com/Articles/798054/SimpleScene-d-s ...
- thinkphp连接数据库
版本:3.1.1 连接数据库的具体位置 thinkphp/Config/convention.php,默认修改数据库在这里就可以了 但是为了方便,把数据库配置写到Index/Conf/config.p ...
- ecshop团购显示“库存不足”
产生原因:是因为产品设置了多属性 解决办法:打开group_buy.php 第 267行找到 empty($product_info) ? $product_info = array(, ) : '' ...
- jquery满屏滚动代码
//获取显示器宽度 .高度 $screenW = document.body.clientWidth; $screenH = ; $BTimer = ; // 时间周期 $liSize = $(&qu ...
- C++中const 的各种用法
C++中const 关键字的用法 const修饰变量 const 主要用于把一个对象转换成一个常量,例如: ; size = ; // error: assignment of read-only v ...
- Windwos下常用DOS命令
1.添加用户命令: net user 用户名 密码 /add 2.将用户加入组的命令: net localgroup administrators 用户名 /add 3.在dos命令行模式下启用用户: ...
- Effective Objective-C 2.0 — 第13条：用“方法调配 技术” 调试 “黑盒方法”
自己理解是调配了方法 在运行期,可以向类中新增或替换选择子所对应的方法实现. 使用另一份实现来替换原有的方法实现,这道工序叫做“方法调配”,开发者常用此技术向原有实现中添加新功能. 一般来说,只有调试 ...