用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 ...
随机推荐
- 【Alpha阶段】第⑨次Scrum例会
会议信息 因编译作业发布,暂时没有进展 时间:2016.11.03 21:30 时长:5min 地点:大运村1号公寓 类型:日常Scrum会议 NXT:2016.11.05 21:30 个人任务报告 ...
- CSS3系列一（概述、选择器、使用选择器插入内容）
CSS3模块化结构 CSS历史发展 CSS(Cascading Style Sheet),层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. CSS3属性选择器 E[att ...
- SaltStack项目实战（七）
上文 http://www.cnblogs.com/shhnwangjian/p/6027992.html 四.memcached 1)创建www用户 mkdir -p /srv/salt/prod/ ...
- stamp-po的作用
stamp-po是表示po文件是否有更新,有更新,则重新编译一次
- js初学—实现checkbox全选功能
布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...
- AspectJ基础学习之二搭建环境（转载）
AspectJ基础学习之二搭建环境(转载) 一.下载Aspectj以及AJDT 上一章已经列出了他的官方网站,自己上去download吧.AJDT是一个eclipse插件,开发aspectj必装,他可 ...
- css 父层 透明 子层不透明Alpha
html代码 <div class="user2-register-bg"> <div class="user2-register-con"& ...
- input的onkeyup效果 超级简短代码
效果代码 title="请输入正确的十六位数字" onkeyup="javascript: return this.value = this.value.toUpperC ...
- PetaPoco 使用总结(二)
接着上一篇,上一篇主要介绍了PetaPoco 基本情况,优缺点和基本的查询功能,所以这篇主要介绍的是PetaPoco 的增,删,改等功能.PetaPoco提供了完整的增,删,改,查功能.是代替SqlH ...
- 快递api网接口快递调用方法
----------------实体类 [DataContract] public class SyncResponseEntity { public SyncResponseEntity() { } ...