用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 ...
随机推荐
- 常见linux命令释义（第七天）——ulimit 与变量内容的删除替代与替换。
linux是一个多用户多任务的系统,不同于windows的单人多任务操作系统.再linux上,在同一个时间点上,可以有多个人同时执行多个任务. 那么假若有10个用户,同时打开了100个100M的文件. ...
- GitHub 在 Clion2016.1.3 中的设置
1.在 GitHub 上注册,建立一个 Repositories,结果获得如下 https://github.com/GPerelman/Clion2016.1.3.git 2.打开 git-bash ...
- HTMl5结构元素:article
article: 表示文档.页面.应用程序或站点中的自包含成分所构成的一个页面的一部分,并且这部分专用于独立地分类或复用.(例如:一个博客的帖子,一篇文章,一个视频文件等.)和<nav>一 ...
- yourphp 的 ThinkTemplate.class.php与ContentReplaceBehavior.class.php
ThinkTemplate.class.php :去掉版权(针对html代码) ContentReplaceBehavior.class.php:一些默认标签的路劲,如:__PUBLIC__,../P ...
- 取出return array() 数组内容
d.php文件 return array( "0" => 内容一, "1" => 内容二, "2" => 内容三, &qu ...
- Specified key was too long; max key length is 767 bytes mysql
Specified key was too long; max key length is 767 bytes 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该 ...
- js动态生成表格
动态生成表格 *创建一个页面:两个输入框和一个按钮 *代码和步骤 /* 1.得到输入的行 ...
- yii2 如何用命名空间方式使用第三方类库
原文地址:http://www.yiichina.com/tutorial/395 Yii 2.0最显著的特征之一就是引入了命名空间,因此对于自定义类的引入方式也同之前有所不同.这篇文章讨论一下如何利 ...
- Java并发编程核心方法与框架-phaser的使用
arriveAndAwaitAdvance()方法 arriveAndAwaitAdvance()作用是当前线程已经到达屏障,在此等待一段时间,等条件满足后继续向下一个屏障执行. public cla ...
- 将图片部署在tomcat/iportWork/uploadFiles中
将图片部署在tomcat/iportWork/uploadFiles中 1.在将运行的tomcat目录下创建个二级目录iportWork\uploadFiles,如下图: