CSS实现三角形
突然想起搞一把三角形。
简单来说：
建一个div 宽度、高度设为0
添加两个样式：
border 和 border-color
如果需要一个三角形把其他边框都设为透明 transparent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS实现三角形</title>
<style media="screen">
.triangle{
width:0;
height:0;
border:50px solid white;
border-color：red transparent transparent transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
CSS实现三角形的更多相关文章
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
- 用css制作三角形
用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- CSS画三角形引发的一些思考
今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
随机推荐
- MySQL问题记录--python插入中文至MySQL提示SQLErroor:1366错误
一.在爬虫脚本做以下操作仍提示错误:SQL Error: 1366: Incorrect string value: "\xd0\xc2\xce\xc5-" for column ...
- CSS3--overflow属性
overflow:当内容溢出元素框时发生的事情: overflow:默认,内容不会裁剪,会呈现在元素框之外: overflow:hidden:内容会被裁剪,并且其余部分是不可见的(清除浮动) over ...
- CSS样式应用
CSS样式应用的方法: (1)行内样式,将css样式直接放到标签当中,一般都是放入标签的style属性中,它是最方便的一种样式,也是最不方便修改的样式.如下: (2)内嵌式,通过将css写在网页源文件 ...
- vue.common.js?e881:433 TypeError: Cannot read property 'nodeName' of undefined
我觉得吧,是这么个原因,就是响应式要找这个node改它的内容,没找着,就报错了. 用computed监控vuex的state属性,绑定到页面上,如果这个属性改了,因为响应式,那么就要更改页面,如果页面 ...
- 虚拟机解决Device eth0 does not seem to be present 问题。
Device eth0 does not seem to be present... 出现这个问题基本上是因为虚拟机是克隆的导致机器的mac网卡不一致,所以系统识别网卡失败:
- C语言编程风格（转发）
- windows C input 注意
windows控制台输入,默认是以文本模式打开,即使重定向输入,文本模式不变,所以输入时无法读到cr,因为windows已经把crlf转换成单个lf. 如果freopen("CON" ...
- CentOS6.5 下安装 texlive2015 并设置 ctex 中文套装
0 卸载旧版本的 texlive 0.1 卸载 texlive2007 如果系统没有安装过texlive,则跳过第0步. 可以在终端中使用如下命令查询本机已经安装的tex和latex版本: [She@ ...
- Yann LeCun, Geoffrey E. Hinton, and Yoshua Bengio
- STEP模块——电子琴
电子琴原理 什么是声音?上过初中的朋友都知道声音是由震动所产生的.一定频率的震动就产生了一定频率的声音. 理论研究第一步,让喇叭发出do re mi fa sol la si的音,我们先不管do的频率 ...