使用CSS画图之三角形(一)
简单的画一个三角形，代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 正方形8*8 */
.a {
width: 0;
height: 0;
border: 4px solid;
}
/* 正方形80*80 (4个三角形) */
.b {
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 40px solid #ff0000;
border-left: 40px solid #ff0000;
border-bottom: 40px solid #000;
}
/* 三角形: 左右透明，下面没有边框。 */
.c {
width: 0;
height: 0;
font-size: 0;
border-width: 40px;
border-color: #333 transparent transparent transparent;
border-style: solid;
border-bottom: none;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>
使用CSS画图之三角形(一)的更多相关文章
- 基于单个 div 的 CSS 画图
原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 画图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺术的结合.赞作者的这句话:Re ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 纯 CSS 创建一个三角形
[要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- 用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
- css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
随机推荐
- 2018届研究生招生预推免（THU,HIT）经历分享——guochengtao
注:本文为作者原创文章,且为无偿分享,读者可以阅读,但请尊重劳动成果,勿作为商业用途!如对文章中的内容有意见或者出现了您不喜欢的言论,请您保留,谢谢合作! 又到一年12月,这代表着2017年已经接近尾 ...
- Activity的直接子类
Activity的直接子类 AccountAuthenticatorActivity, AliasActivity ExpandableListActivity FragmentActivity Li ...
- 【译】10个机器学习的JavaScript示例
原文地址:10 Machine Learning Examples in JavaScript 在过去的每一年,用于机器学习(Machine Learning)的库在变得越来越快和易用.一直以来Pyt ...
- selenium定位tr及td，并获取其文本及属性
#获取所有的trtrlist=brower.find_elements_by_tag_name("tr")for tr in trlist: #获取tr中的所有td tdlist= ...
- CentOS6.5 下Nginx 的安装与配置
昨天买了个服务器最近在配置一些基础环境,想在访问www.wzpbk.com:8080 不想要后面的:8080就能直接访问到,听说了Nginx就研究下给服务器装上传说中大名鼎鼎 Nginx 他能反向代 ...
- NOIP2016提高组初赛(1)
一.选择题 6.后缀表达式,使用二叉树来求解,正常情况下的表达式a*(b+c)- d为中序遍历的二叉树. 即 若转换为后缀表达式(左右根)则为abc+*d- 14.代数字进去,多试几遍: 三.问题求解 ...
- inotify软件部署及实时同步
声明:博主使用的是CentOS6.9的系统 参考资料: https://github.com/rvoicilas/inotify-tools/wiki http://www.ibm.com/devel ...
- form表单提交和ajax提交优先级
form中若定义action,那么,ajax将不能执行.form默认提交的请求优先级高于ajax
- C#中级-从零打造基于Socket在线升级模块
一.前言 前段时间一直在折腾基于Socket的产品在线升级模块.之前我曾写过基于.Net Remoting的.基于WCF的在线升级功能,由于并发量较小及当时代码经验的不足一直没有实际应用. ...
- hdu 5225 Tom and permutation（回溯）
题目链接:hdu 5225 Tom and permutation #include <cstdio> #include <cstring> #include <algo ...